@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
:root {
  --ds-font-sans: "Be Vietnam Pro", sans-serif;
  --ds-font-mono: "JetBrains Mono", ui-monospace, monospace;
  --ds-canvas: #F6F7F9;
  --ds-surface: #FFFFFF;
  --ds-sunken: #F0F2F5;
  --ds-border: #E3E6EB;
  --ds-border-strong: #CDD2DA;
  --ds-text: #141A23;
  --ds-text-2: #4A5361;
  --ds-text-3: #6B7482;
  --ds-primary: #3442C9;
  --ds-primary-hover: #2733A3;
  --ds-primary-subtle: #ECEEFC;
  --ds-zbs: #0F766E;
  --ds-lead: #6D3FD0;
  --ds-event: #B45309;
  --ds-danger: #B42520;
  --ds-sidebar: #0F141B;
}

body.hub {
  margin: 0;
  background: #F6F7F9;
  color: #141A23;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 14px;
  line-height: 22px;
}

body.hub,
body.hub * {
  box-sizing: border-box;
}

body.hub button,
body.hub input,
body.hub select,
body.hub textarea {
  font-family: inherit;
}

body.hub .mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.hub-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 100vh;
  background: #F6F7F9;
  font-family: "Be Vietnam Pro", sans-serif;
  color: #141A23;
}

.hub-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 24px 48px;
}

.hub-main a {
  color: #3442C9;
  text-decoration: none;
}

.hub-main a:hover {
  color: #2733A3;
  text-decoration: underline;
}

@media (max-width: 960px) {
  .hub-shell {
    grid-template-columns: 1fr;
  }
  .hub-side {
    position: relative;
    height: auto;
  }
}
.hub-side {
  width: 232px;
  height: 100vh;
  position: sticky;
  top: 0;
  background: #0F141B;
  color: #C5CCD6;
  display: flex;
  flex-direction: column;
  font-family: "Be Vietnam Pro", sans-serif;
  border-right: 1px solid #1C232D;
}

body.hub .hub-side a,
body.hub .hub-side a:hover,
body.hub .hub-side a:visited {
  text-decoration: none;
}

.hub-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 18px;
}

body.hub .hub-side a.hub-logo,
body.hub .hub-side a.hub-logo:hover {
  color: inherit;
}

.hub-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #3442C9;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  flex: none;
}

.hub-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.hub-logo b {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
}

.hub-logo small {
  color: #7E8896;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hub-create-wrap {
  padding: 0 16px 16px;
}

body.hub .hub-side a.hub-create {
  width: 100%;
  height: 38px;
  border-radius: 6px;
  background: #3442C9;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

body.hub .hub-side a.hub-create:hover {
  background: #2733A3;
  color: #fff;
}

.hub-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 10px;
  flex: 1;
  overflow: auto;
}

body.hub .hub-side .hub-nav > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 36px;
  padding: 0 10px 0 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #C5CCD6;
  background: transparent;
}

body.hub .hub-side .hub-nav > a:hover {
  background: #1A212B;
  color: #fff;
}

body.hub .hub-side .hub-nav > a.active {
  background: #1F2732;
  color: #fff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #6B78F0;
}

.hub-sub {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 0 6px 12px;
  margin-left: 12px;
  border-left: 1px solid #252D38;
}

body.hub .hub-side .hub-sub a {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 400;
  color: #9AA3B0;
  background: transparent;
  box-shadow: none;
}

body.hub .hub-side .hub-sub a:hover,
body.hub .hub-side .hub-sub a.active {
  color: #fff;
  background: #1A212B;
  font-weight: 400;
  box-shadow: none;
}

.hub-badge {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  display: inline-grid;
  place-items: center;
  color: #fff;
}

.hub-badge[hidden] {
  display: none;
}

.hub-logout {
  margin: 0 16px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #7E8896;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.hub-logout:hover {
  color: #fff;
}

.hub-user {
  border-top: 1px solid #1C232D;
  padding: 14px 16px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hub-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  flex: none;
}

.hub-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.hub-user b {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}

.hub-user span {
  color: #7E8896;
  font-size: 11px;
}

.h-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  border: 1px solid #CDD2DA;
  background: #FFFFFF;
  color: #141A23;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.h-btn:hover {
  background: #F0F2F5;
}

.h-btn.sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}

.h-btn.lg {
  height: 44px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 600;
}

.h-btn.primary {
  border: 0;
  background: #3442C9;
  color: #fff;
  font-weight: 600;
}

.h-btn.primary:hover {
  background: #2733A3;
}

.h-btn.ghost {
  border: 0;
  background: transparent;
  color: #3442C9;
  padding: 0 12px;
}

.h-btn.ghost:hover {
  background: #ECEEFC;
}

.h-btn.danger {
  border: 1px solid #F4C4C1;
  background: #FFFFFF;
  color: #B42520;
}

.h-btn.danger:hover {
  background: #FCE8E7;
}

.h-btn:disabled {
  border: 0;
  background: #E3E6EB;
  color: #8A929E;
  font-weight: 600;
  cursor: not-allowed;
}

.h-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  background: #EEF0F3;
  color: #3F4856;
  border: 1px solid #DADEE4;
}

.h-chip .k {
  font-size: 11px;
}

.h-tone-neutral {
  background: #EEF0F3;
  color: #3F4856;
  border-color: #DADEE4;
}

.h-tone-info {
  background: #ECEEFC;
  color: #2B3AB8;
  border-color: #CDD2F7;
}

.h-tone-success {
  background: #E3F3EA;
  color: #17673F;
  border-color: #BFE3CD;
}

.h-tone-warning {
  background: #FCF0D9;
  color: #8A5000;
  border-color: #F2D9A6;
}

.h-tone-danger {
  background: #FCE8E7;
  color: #B42520;
  border-color: #F4C4C1;
}

.h-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
  flex: none;
}

.h-type {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.h-type.zbs {
  background: #E1F3F1;
  color: #0F766E;
}

.h-type.lead {
  background: #F0EAFC;
  color: #6D3FD0;
}

.h-type.event {
  background: #FCEEDF;
  color: #B45309;
}

.h-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.h-field label {
  font-size: 13px;
  color: #141A23;
  font-weight: 500;
}

.h-field input,
.h-field select,
.h-field textarea {
  border: 1px solid #CDD2DA;
  border-radius: 6px;
  height: 38px;
  min-height: 38px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: #141A23;
  background: #FFFFFF;
}

.h-field textarea {
  height: auto;
  min-height: 88px;
  padding: 8px 12px;
}

.h-field .count {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: #6B7482;
  text-align: right;
}

.h-field .count.over {
  color: #B42520;
  font-weight: 600;
}

.h-error {
  color: #B42520;
  font-size: 12px;
}

.h-banner {
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid #F2D9A6;
  background: #FCF0D9;
  color: #8A5000;
}

.h-banner.danger {
  border-color: #F4C4C1;
  background: #FCE8E7;
  color: #B42520;
}

.h-card {
  background: #FFFFFF;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  padding: 14px;
}

.h-grid {
  display: grid;
  gap: 12px;
}

.h-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.h-kpi {
  text-decoration: none;
  color: inherit;
  display: block;
}

.h-kpi b {
  display: block;
  font-size: 24px;
  margin-top: 4px;
}

.h-kpi span {
  color: #6B7482;
  font-size: 12px;
}

.h-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.h-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.h-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.h-sub {
  color: #6B7482;
  margin: 4px 0 0;
}

.h-table-wrap {
  overflow: auto;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  background: #FFFFFF;
}

.h-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
}

.h-table th, .h-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid #E3E6EB;
  vertical-align: top;
}

.h-table th {
  font-size: 12px;
  color: #6B7482;
  font-weight: 600;
}

.h-split {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
}

.h-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 8px;
}

.h-day {
  background: #FFFFFF;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  min-height: 140px;
  padding: 8px;
}

.h-card-item {
  border-left: 3px solid #0F766E;
  background: #FFFFFF;
  border-radius: 6px;
  padding: 6px 8px;
  margin-top: 6px;
  font-size: 12px;
}

.h-card-item.lead {
  border-left-color: #6D3FD0;
}

.h-card-item.event {
  border-left-color: #B45309;
}

.h-card-item.dash {
  border-style: dashed;
}

.h-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 27, 0.45);
  display: grid;
  place-items: center;
  z-index: 20;
}

.h-modal .box {
  width: min(480px, 100vw - 32px);
  background: #FFFFFF;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 12px 32px rgba(16, 21, 29, 0.16);
}

.h-toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  background: #141A23;
  color: #fff;
  border-radius: 8px;
  padding: 10px 12px;
}

.d-seg {
  display: inline-flex;
  padding: 3px;
  background: #F0F2F5;
  border-radius: 7px;
  gap: 2px;
}

.d-seg button {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #4A5361;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.d-seg button.on {
  background: #FFFFFF;
  color: #141A23;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 21, 29, 0.1);
}

.d-tabs {
  display: flex;
  gap: 4px;
}

.d-tabs button {
  padding: 10px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #4A5361;
  cursor: pointer;
}

.d-tabs button.on {
  color: #141A23;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 #3442C9;
}

@media (max-width: 960px) {
  .h-kpis, .h-split {
    grid-template-columns: 1fr;
  }
}
.d-page {
  margin: -20px -24px -48px;
}

.d-head {
  background: #FFFFFF;
  border-bottom: 1px solid #E3E6EB;
  padding: 20px 32px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.d-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.d-kicker {
  font-size: 13px;
  color: #6B7482;
}

.d-head h1 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

.d-body {
  padding: 24px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.d-note {
  border: 1px solid #CDD2F7;
  background: #ECEEFC;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #1F2A8A;
}

.d-section-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.d-section-h h2, .d-card h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.d-muted {
  font-size: 12px;
  color: #6B7482;
}

.d-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

body.hub .hub-main a.d-kpi {
  background: #FFFFFF;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: #141A23;
}

body.hub .hub-main a.d-kpi:hover {
  border-color: #CDD2DA;
  box-shadow: 0 1px 2px rgba(16, 21, 29, 0.06), 0 2px 8px rgba(16, 21, 29, 0.06);
  color: #141A23;
  text-decoration: none;
}

.d-kpi b, .d-stat b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
}

.d-kpi b {
  font-size: 28px;
  line-height: 32px;
}

.d-kpi span, .d-stat span {
  font-size: 12px;
  color: #4A5361;
  display: flex;
  align-items: center;
  gap: 6px;
}

.d-health {
  background: #FFFFFF;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.d-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: #E3E6EB;
  border: 1px solid #E3E6EB;
  border-radius: 8px;
  overflow: hidden;
}

.d-stat {
  background: #FFFFFF;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.d-stat b {
  font-size: 24px;
}

.d-stat em {
  font-style: normal;
  font-size: 12px;
  color: #6B7482;
}

.d-bar {
  height: 4px;
  background: #EEF0F3;
  border-radius: 2px;
  overflow: hidden;
}

.d-bar i {
  display: block;
  height: 100%;
}

.d-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
  gap: 24px;
}

.d-card {
  background: #FFFFFF;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  overflow: hidden;
}

.d-card .pad {
  padding: 16px 20px;
}

.d-grid8, .d-grid6 {
  display: grid;
  text-align: right;
  align-items: center;
  font-size: 13px;
}

.d-grid8 {
  grid-template-columns: minmax(150px, 1.6fr) repeat(7, minmax(52px, 1fr));
}

.d-grid6 {
  grid-template-columns: minmax(170px, 2fr) repeat(5, minmax(60px, 1fr));
}

.d-grid8 span, .d-grid6 span {
  padding: 8px;
}

.d-grid8 .name, .d-grid6 .name {
  text-align: left;
  padding: 10px 20px;
  font-family: "Be Vietnam Pro", sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.d-headrow {
  background: #F6F7F9;
  color: #4A5361;
  font-size: 12px;
}

.d-num {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  border-top: 1px solid #EEF0F3;
}

.d-ava {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  display: grid;
  place-items: center;
  background: #3442C9;
}

.d-high {
  font-size: 11px;
  font-weight: 600;
  color: #8A5000;
  background: #FCF0D9;
  padding: 1px 6px;
  border-radius: 4px;
}

.d-heat {
  padding: 16px 20px 20px;
  border-top: 1px solid #EEF0F3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.d-heat-grid {
  display: grid;
  grid-template-columns: 64px repeat(5, minmax(0, 1fr));
  gap: 4px;
  font-size: 11px;
}

.d-heat-grid b {
  height: 28px;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
}

.d-type {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.d-type article {
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #FFFFFF;
  border: 1px solid #E3E6EB;
}

.d-type article.na {
  background: #FAFBFC;
  border: 1px dashed #CDD2DA;
}

.d-type strong {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 26px;
  font-weight: 600;
}

.d-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 24px;
}

.d-chart {
  background: #FFFFFF;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.d-chart h2 {
  margin: 0;
  font-size: 15px;
}

.d-line {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 40px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.d-line i {
  display: block;
  height: 10px;
  background: #F0F2F5;
  border-radius: 3px;
  overflow: hidden;
}

.d-line i b {
  display: block;
  height: 100%;
  border-radius: 3px;
}

.d-footnote {
  border: 1px dashed #CDD2DA;
  background: #FAFBFC;
  border-radius: 10px;
  padding: 16px 20px;
  font-size: 13px;
  color: #4A5361;
  line-height: 20px;
}

.rq-page {
  margin: -20px -24px -48px;
}

.rq-head {
  background: #FFFFFF;
  border-bottom: 1px solid #E3E6EB;
  padding: 20px 32px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rq-titleblock {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rq-head h1 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

.rq-sub {
  font-size: 13px;
  color: #4A5361;
}

.rq-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.rq-tabs {
  display: flex;
  gap: 4px;
}

.rq-tabs button {
  padding: 10px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #4A5361;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
}

.rq-tabs button.on {
  color: #141A23;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 #3442C9;
}

.rq-tabs b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  background: #EEF0F3;
  color: #4A5361;
  padding: 1px 6px;
  border-radius: 8px;
}

body.hub .hub-main a.rq-create {
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  background: #3442C9;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

body.hub .hub-main a.rq-create:hover {
  background: #2733A3;
  color: #fff;
  text-decoration: none;
}

.rq-body {
  padding: 20px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rq-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.rq-tools input, .rq-tools select {
  height: 34px;
  border: 1px solid #CDD2DA;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  background: #FFFFFF;
  color: #141A23;
}

.rq-tools input {
  width: 280px;
  max-width: 100%;
  padding: 0 12px;
}

.rq-tools select {
  padding: 0 8px;
  cursor: pointer;
}

.rq-tools select.on {
  border-color: #3442C9;
  background: #ECEEFC;
}

.rq-div {
  width: 1px;
  height: 20px;
  background: #E3E6EB;
  margin: 0 4px;
}

.rq-pill {
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid #CDD2DA;
  background: #FFFFFF;
  color: #141A23;
}

.rq-pill.on {
  border-color: #141A23;
  background: #141A23;
  color: #fff;
}

.rq-clear {
  height: 30px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: #3442C9;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.rq-count {
  margin-left: auto;
  font-size: 12px;
  color: #6B7482;
}

.rq-table {
  background: #FFFFFF;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  overflow: auto;
}

.rq-min {
  min-width: 1080px;
}

.rq-cols {
  display: grid;
  grid-template-columns: 96px minmax(260px, 2.4fr) 120px 120px 110px 140px 120px 130px 96px;
  align-items: center;
}

.rq-headrow {
  background: #F6F7F9;
  font-size: 12px;
  color: #4A5361;
}

.rq-headrow span, .rq-headrow button {
  padding: 9px 8px;
}

.rq-headrow span:first-child {
  padding: 9px 16px;
}

.rq-sort {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: #141A23;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

body.hub .hub-main a.rq-row {
  border-top: 1px solid #EEF0F3;
  text-decoration: none;
  color: #141A23;
  font-size: 13px;
}

body.hub .hub-main a.rq-row:hover {
  background: #F8F9FB;
  color: #141A23;
  text-decoration: none;
}

.rq-row > span {
  padding: 10px 8px;
  min-width: 0;
}

.rq-row > span:first-child {
  padding: 12px 16px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: #4A5361;
}

.rq-title {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rq-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
}

.rq-type {
  height: 18px;
  padding: 0 6px;
  border-radius: 3px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.rq-type.zbs {
  background: #E1F3F1;
  color: #0F766E;
}

.rq-type.lead {
  background: #F0EAFC;
  color: #6D3FD0;
}

.rq-type.event {
  background: #FCEEDF;
  color: #B45309;
}

.rq-date {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rq-date small {
  font-size: 11px;
  color: #6B7482;
  font-weight: 400;
}

.rq-date b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
}

.rq-chip {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.rq-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rq-owner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.rq-ava {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 600;
  display: grid;
  place-items: center;
  background: #3442C9;
  color: #fff;
  flex: none;
}

.rq-task {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 16px;
}

.rq-task i {
  display: block;
  height: 4px;
  background: #EEF0F3;
  border-radius: 2px;
  overflow: hidden;
}

.rq-task i b {
  display: block;
  height: 100%;
  background: #3442C9;
}

.rq-empty {
  padding: 56px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.nr-page {
  margin: -20px -24px -48px;
}

.nr-head {
  background: #FFFFFF;
  border-bottom: 1px solid #E3E6EB;
  padding: 18px 32px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nr-crumb {
  font-size: 13px;
  color: #6B7482;
}

.nr-head h1 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

.nr-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.nr-tabs {
  display: flex;
  gap: 4px;
}

.nr-tabs button {
  padding: 10px 16px 12px;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  color: #4A5361;
}

.nr-tabs button.on {
  color: #141A23;
}

.nr-tabs button b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.nr-tabs button.on b {
  font-weight: 700;
}

.nr-tabs button small {
  font-size: 11px;
  color: #6B7482;
  font-weight: 400;
}

.nr-clear {
  height: 30px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: #3442C9;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.nr-body {
  padding: 24px 32px 64px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.nr-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  flex: 999 1 560px;
}

.nr-side {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 300px;
  min-width: 0;
}

.nr-card {
  background: #FFFFFF;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nr-card h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.nr-sec {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.nr-stat {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
}

.nr-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.nr-grid.sm {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.nr-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nr-field > span, .nr-label {
  font-size: 13px;
  font-weight: 500;
}

.nr-req {
  color: #B42520;
}

.nr-field input, .nr-field select, .nr-field textarea, .nr-input {
  border: 1px solid #CDD2DA;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  color: #141A23;
  background: #FFFFFF;
}

.nr-field input, .nr-field select, .nr-input {
  height: 38px;
  padding: 0 12px;
}

.nr-field textarea {
  padding: 10px 12px;
  resize: vertical;
}

.nr-page input:focus, .nr-page select:focus, .nr-page textarea:focus {
  outline: none;
  border-color: #3442C9 !important;
  box-shadow: 0 0 0 3px #CDD2F7;
}

.nr-bad {
  border-color: #B42520 !important;
}

.nr-err {
  font-size: 12px;
  color: #B42520;
}

.nr-count {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: #6B7482;
}

.nr-lock {
  height: 38px;
  padding: 0 12px;
  border: 1px solid #E3E6EB;
  background: #F6F7F9;
  border-radius: 6px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4A5361;
}

.nr-seg {
  display: inline-flex;
  padding: 3px;
  background: #F0F2F5;
  border-radius: 7px;
  gap: 2px;
  align-self: flex-start;
}

.nr-seg button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #4A5361;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.nr-seg button.on {
  background: #FFFFFF;
  color: #141A23;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 21, 29, 0.1);
}

.nr-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.nr-choice button {
  text-align: left;
  padding: 12px 14px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid #E3E6EB;
  background: #FFFFFF;
}

.nr-choice button.on {
  border-color: #3442C9;
  background: #F5F6FE;
}

.nr-choice i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex: none;
  margin-top: 2px;
  border: 1.5px solid #9AA2AE;
}

.nr-choice button.on i {
  border: 5px solid #3442C9;
}

.nr-choice b {
  display: block;
  font-size: 14px;
}

.nr-choice small {
  display: block;
  font-size: 12px;
  color: #4A5361;
  font-weight: 400;
}

.nr-add {
  align-self: flex-start;
  height: 32px;
  padding: 0 12px;
  border: 1px dashed #CDD2DA;
  border-radius: 6px;
  background: #FFFFFF;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  color: #141A23;
}

.nr-add:disabled {
  color: #9AA2AE;
  cursor: not-allowed;
}

.nr-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  border: 1px solid #E3E6EB;
  border-radius: 8px;
  background: #FAFBFC;
}

.nr-note {
  font-size: 12px;
  color: #4A5361;
  background: #F6F7F9;
  border-radius: 6px;
  padding: 10px 12px;
  line-height: 18px;
}

.nr-banner {
  border: 1px solid #F4C4C1;
  background: #FCE8E7;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #5E1411;
}

.nr-banner button {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: #5E1411;
  text-align: left;
  cursor: pointer;
  display: flex;
  gap: 8px;
}

.nr-banner button b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: #B42520;
  min-width: 64px;
  font-weight: 500;
}

.nr-banner button span {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nr-drop {
  position: relative;
  border: 1.5px dashed #CDD2DA;
  border-radius: 8px;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background: #FAFBFC;
  text-align: center;
}

.nr-drop input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.nr-file {
  border: 1px solid #BFE3CD;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.nr-file.bad {
  border-color: #F4C4C1;
}

.nr-thumb {
  width: 96px;
  height: 54px;
  border-radius: 4px;
  flex: none;
  background: #EEF0F3 center/cover no-repeat;
}

.nr-qa {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: #F6F7F9;
  border-radius: 8px;
}

.nr-panel {
  background: #FFFFFF;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nr-over {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4A5361;
}

.nr-bar {
  height: 6px;
  background: #EEF0F3;
  border-radius: 3px;
  overflow: hidden;
}

.nr-bar i {
  display: block;
  height: 100%;
}

.nr-jump {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  color: #141A23;
  text-align: left;
  width: 100%;
}

.nr-sla {
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nr-sla div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 12px;
}

.nr-submit {
  height: 44px;
  border: 0;
  border-radius: 6px;
  background: #3442C9;
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.nr-submit:hover {
  background: #2733A3;
}

.nr-draft {
  height: 40px;
  border: 1px solid #CDD2DA;
  border-radius: 6px;
  background: #FFFFFF;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.nr-draft:hover {
  background: #F0F2F5;
}

.nr-done {
  padding: 40px 32px;
  display: flex;
  justify-content: center;
}

.nr-done section {
  background: #FFFFFF;
  border: 1px solid #E3E6EB;
  border-radius: 14px;
  padding: 32px;
  max-width: 640px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nr-ok {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #E3F3EA;
  color: #17673F;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 700;
}

.nr-snap {
  border: 1px solid #E3E6EB;
  border-radius: 8px;
  overflow: hidden;
}

.nr-snap h3 {
  margin: 0;
  padding: 10px 14px;
  background: #F6F7F9;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4A5361;
}

.nr-snap div {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 8px 16px;
  padding: 14px;
  font-size: 13px;
}

.nr-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 27, 0.45);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 24px;
}

.nr-modal .box {
  background: #FFFFFF;
  border-radius: 14px;
  width: 520px;
  max-width: 100%;
  box-shadow: 0 12px 32px rgba(16, 21, 29, 0.16);
}

.nr-actions {
  padding: 16px 24px;
  border-top: 1px solid #EEF0F3;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.nr-link {
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  background: #3442C9;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.nr-table {
  border: 1px solid #E3E6EB;
  border-radius: 8px;
  overflow: auto;
}

.nr-row {
  display: grid;
  grid-template-columns: 32px minmax(140px, 1.6fr) minmax(120px, 1fr) 90px 92px;
  gap: 8px;
  padding: 8px 12px;
  align-items: center;
}

.nr-row.head {
  background: #F6F7F9;
  font-size: 12px;
  color: #4A5361;
}

.nr-row + .nr-row {
  border-top: 1px solid #EEF0F3;
}

.nr-pill {
  height: 34px;
  padding: 0 14px;
  border-radius: 17px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #CDD2DA;
  background: #FFFFFF;
}

.nr-pill.on {
  border-color: #B45309;
  background: #FCEEDF;
  color: #B45309;
  font-weight: 600;
}

.nr-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  border: 1px solid #E3E6EB;
  background: #FFFFFF;
}

.nr-check.on {
  border-color: #3442C9;
  background: #F5F6FE;
}

.nr-preview {
  border: 1px solid #E3E6EB;
  border-radius: 12px;
  overflow: hidden;
}

.nr-preview .pic {
  aspect-ratio: 16/9;
  background: #EEF0F3 center/cover no-repeat;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #6B7482;
}

.nr-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  background: #FAFBFC;
  border: 1px solid #EEF0F3;
}

.rd-page {
  margin: -20px -24px -48px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rd-head {
  background: #FFFFFF;
  border-bottom: 1px solid #E3E6EB;
  padding: 18px 32px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rd-crumb {
  font-size: 13px;
  color: #6B7482;
}

.rd-top {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.rd-title {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

.rd-sub {
  font-size: 13px;
  color: #4A5361;
}

.rd-pills {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
}

.rd-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid #E3E6EB;
  border-radius: 4px;
  font-weight: 600;
}

.rd-type {
  height: 24px;
  padding: 0 8px;
  border-radius: 4px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.rd-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.rd-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.rd-btn.primary {
  background: #3442C9;
  color: #fff;
  border: 1px solid #3442C9;
  font-weight: 600;
}

.rd-btn.sec {
  background: #fff;
  color: #141A23;
  border: 1px solid #CDD2DA;
}

.rd-btn.warn {
  background: #fff;
  color: #8A5000;
  border: 1px solid #F2D9A6;
}

.rd-btn.danger {
  background: #fff;
  color: #B42520;
  border: 1px solid #F4C4C1;
}

.rd-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}

.rd-chip small {
  font-size: 10px;
  opacity: 0.75;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.rd-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: #EEF0F3;
  border: 1px solid #EEF0F3;
  border-radius: 8px;
  overflow: hidden;
}

.rd-meta div {
  background: #fff;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rd-meta span {
  font-size: 11px;
  color: #6B7482;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.rd-meta b {
  font-size: 14px;
  font-weight: 600;
}

.rd-meta select {
  height: 28px;
  padding: 0 6px;
  border: 1px solid #CDD2DA;
  border-radius: 5px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
}

.rd-banner {
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  font-size: 13px;
  align-items: center;
}

.rd-banner button {
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  border: 0;
  background: #141A23;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.rd-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
}

.rd-tabs button {
  padding: 10px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  color: #4A5361;
}

.rd-tabs button.on {
  color: #141A23;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 #3442C9;
}

.rd-tabs b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  background: #EEF0F3;
  color: #4A5361;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 500;
  margin-left: 6px;
}

.rd-body {
  padding: 24px 32px 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.rd-card {
  background: #fff;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.rd-card h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.rd-split {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
}

.rd-grow {
  flex: 999 1 480px;
  min-width: 0;
}

.rd-side {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rd-side > .rd-card {
  width: 100%;
}

.rd-kv {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 10px 16px;
  font-size: 13px;
  min-width: 0;
}

.rd-side .rd-kv {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 6px 14px;
}

.rd-kv > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.rd-kv span {
  color: #4A5361;
}

.rd-kv b {
  font-weight: 500;
  white-space: pre-wrap;
}

.rd-side .rd-card > div {
  min-width: 0;
  flex-wrap: wrap;
}

.rd-meta div {
  min-width: 0;
}

.rd-meta b, .rd-meta select {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.rd-mile {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) minmax(0, max-content);
  gap: 10px;
  align-items: center;
  font-size: 13px;
  min-width: 0;
}

.rd-mile i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.rd-mile .mono {
  font-size: 12px;
  color: #4A5361;
  overflow-wrap: anywhere;
}

.rd-card a, .rd-card .mono, .rd-row b, .rd-row span {
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 100%;
}

.rd-steps {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  max-width: 100%;
}

.rd-step {
  flex: 1 0 96px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rd-step i {
  height: 4px;
  border-radius: 2px;
  display: block;
}

.rd-step span {
  font-size: 11px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.rd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.rd-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.rd-row {
  display: grid;
  gap: 8px;
  align-items: center;
  padding: 10px 20px;
  border-top: 1px solid #EEF0F3;
}

.rd-row > * {
  min-width: 0;
}

.rd-row .rd-chip {
  height: auto;
  min-height: 22px;
  max-width: 100%;
  white-space: normal;
}

.rd-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 27, 0.45);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 24px;
}

.rd-modal .box {
  background: #fff;
  border-radius: 14px;
  width: 500px;
  max-width: 100%;
  box-shadow: 0 12px 32px rgba(16, 21, 29, 0.16);
}

.rd-modal textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #CDD2DA;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
}

.rd-mini {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.cal-page {
  margin: -20px -24px -48px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.cal-head {
  background: #FFFFFF;
  border-bottom: 1px solid #E3E6EB;
  padding: 20px 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cal-top, .cal-nav, .cal-filters {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cal-top {
  justify-content: space-between;
}

.cal-nav h1 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

.cal-nav > b {
  font-size: 15px;
}

.cal-shift {
  display: flex;
  gap: 4px;
}

.cal-shift button {
  height: 32px;
  border: 1px solid #CDD2DA;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
}

.cal-shift button:first-child, .cal-shift button:last-child {
  width: 32px;
  font-size: 14px;
}

.cal-shift button:hover {
  background: #F0F2F5;
}

.cal-seg {
  display: inline-flex;
  padding: 3px;
  background: #F0F2F5;
  border-radius: 7px;
  gap: 2px;
}

.cal-seg button {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #4A5361;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.cal-seg button.on {
  background: #fff;
  color: #141A23;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 21, 29, 0.1);
}

.cal-filters {
  gap: 8px;
}

.cal-pill {
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  border: 1px solid #CDD2DA;
  background: #fff;
  color: #141A23;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cal-pill i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.cal-pill .mono {
  font-size: 11px;
  opacity: 0.75;
}

.cal-pill.on {
  background: #141A23;
  color: #fff;
  border-color: #141A23;
}

.cal-rule {
  width: 1px;
  height: 20px;
  background: #E3E6EB;
  margin: 0 4px;
}

.cal-filters select {
  height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid #CDD2DA;
  background: #fff;
  font: inherit;
  font-size: 12px;
  max-width: 170px;
}

.cal-filters select.on {
  border-color: #3442C9;
  background: #ECEEFC;
}

.cal-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #4A5361;
  margin-left: 4px;
}

.cal-brand {
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid #CDD2DA;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.cal-brand.on {
  border-color: #3442C9;
  background: #ECEEFC;
  color: #2B3AB8;
}

.cal-reset {
  height: 30px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: #3442C9;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.cal-body {
  padding: 20px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.cal-warnbox {
  border: 1px solid #F2D9A6;
  background: #FCF0D9;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #5C3600;
  display: flex;
  gap: 10px;
}

.cal-warnbox div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cal-lane, .cal-month, .cal-day, .cal-list {
  background: #fff;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  overflow: auto;
  min-width: 0;
}

.cal-lane-head {
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid #EEF0F3;
}

.cal-lane-head span {
  font-size: 12px;
  color: #6B7482;
}

.cal-lane-grid {
  min-width: 640px;
  display: grid;
  grid-template-columns: 160px repeat(7, minmax(0, 1fr)) 70px;
  font-size: 13px;
}

.cal-lane-grid .h {
  padding: 8px;
  text-align: center;
  font-size: 12px;
  color: #4A5361;
  background: #F6F7F9;
}

.cal-lane-grid .h:first-child, .cal-lane-grid .name, .cal-lane-grid .sum:first-child {
  padding-left: 18px;
  text-align: left;
}

.cal-lane-grid .r {
  text-align: right;
  padding-right: 18px;
}

.cal-lane-grid .name, .cal-lane-grid > span:not(.h) {
  border-top: 1px solid #EEF0F3;
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.cal-lane-grid .name i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex: none;
}

.cal-lane-grid b {
  height: 28px;
  width: 100%;
  border-radius: 4px;
  display: grid;
  place-items: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
}

.cal-lane-grid .sum {
  border-top-color: #CDD2DA;
  font-weight: 600;
}

.cal-lane-grid .c {
  justify-content: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(132px, 1fr));
  gap: 1px;
  background: #E3E6EB;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  overflow: auto;
  min-height: 560px;
}

.cal-col {
  background: #fff;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.cal-col.off, .cal-col.off .cal-col-head {
  background: #F7F8FA;
}

.cal-col.off .cal-col-head {
  background: #F3F4F6;
}

.cal-col-head {
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 1px solid #EEF0F3;
}

.cal-col-head > div {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #4A5361;
}

.cal-col-head > b, .cal-col-head > button.num {
  font-size: 20px;
  line-height: 24px;
  width: fit-content;
  padding: 0 6px;
  margin-left: -6px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
}

.cal-col-head > b.today, .cal-col-head > button.num.today, .cal-cell .num.today {
  background: #3442C9;
  color: #fff;
}

.cal-col-head .ex {
  font-size: 11px;
  color: #6B7482;
}

.cal-col-head .over, .cal-cell .over {
  font-size: 10px;
  font-weight: 700;
  color: #8A5000;
  background: #FCF0D9;
  border: 1px solid #F2D9A6;
  border-radius: 3px;
  padding: 1px 5px;
  width: fit-content;
}

.cal-col-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.cal-page a.cal-card, .cal-page a.cal-day-card, .cal-page a.cal-chip, .cal-page .cal-list a {
  color: #141A23;
  text-decoration: none;
}

.cal-page a.cal-card:hover, .cal-page a.cal-day-card:hover, .cal-page .cal-list a:hover {
  color: #141A23;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(16, 21, 29, 0.06), 0 2px 8px rgba(16, 21, 29, 0.08);
}

.cal-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 9px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #E3E6EB;
  border-left: 3px solid var(--edge);
  min-width: 0;
}

.cal-card.ms {
  background: #FFFBF5;
  border-style: dashed;
  border-color: #F3D2AE;
}

.cal-card-top, .cal-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
}

.cal-card-top span:first-child, .cal-card-foot span:first-child {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
}

.cal-card-top b, .cal-chip span, .cal-list .req b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-card-top i, .cal-chip i, .cal-day-card i, .cal-list i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}

.cal-card-top .mono {
  color: #4A5361;
  flex: none;
}

.cal-cat {
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6B7482;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-title {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 16px;
  overflow-wrap: anywhere;
}

.cal-card-foot {
  color: #4A5361;
}

.cal-card-foot span:last-child {
  flex: none;
}

.cal-warn {
  font-size: 11px;
  font-weight: 600;
}

.cal-col-body .empty {
  font-size: 12px;
  color: #9AA2AE;
  padding: 6px 2px;
}

.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(110px, 1fr));
  min-width: 770px;
}

.cal-month-grid .dow {
  padding: 8px 10px;
  font-size: 12px;
  color: #4A5361;
  background: #F6F7F9;
  border-bottom: 1px solid #E3E6EB;
}

.cal-cell {
  min-height: 112px;
  padding: 6px;
  border-bottom: 1px solid #EEF0F3;
  border-right: 1px solid #EEF0F3;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  cursor: pointer;
}

.cal-day-create {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #E3E6EB;
}

.cal-day-create button, .cal-list .strong button, .cal-empty button {
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid #CDD2DA;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: #141A23;
}

.cal-day-create button:hover, .cal-list .strong button:hover, .cal-empty button:hover {
  background: #F0F2F5;
}

.cal-list .strong button {
  height: 28px;
  margin-right: 8px;
  padding: 0 8px;
  font-size: 12px;
}

.cal-cell.off {
  background: #F7F8FA;
}

.cal-cell.out {
  opacity: 0.45;
}

.cal-cell > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cal-cell .num, .cal-cell .more {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

.cal-cell .num {
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  padding: 1px 6px;
}

.cal-cell .more {
  color: #3442C9;
  font-size: 11px;
  text-align: left;
  padding: 0 5px;
}

.cal-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  line-height: 16px;
  padding: 1px 5px;
  border-radius: 3px;
  background: #E1F3F1;
  min-width: 0;
}

.cal-chip.ms {
  background: #FCEEDF;
}

.cal-day > div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  border-top: 1px solid #EEF0F3;
  min-height: 56px;
}

.cal-day > div > span {
  padding: 8px 12px;
  font-size: 12px;
  color: #6B7482;
  border-right: 1px solid #EEF0F3;
}

.cal-day > div > div {
  padding: 6px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.cal-day-card {
  flex: 1 1 280px;
  max-width: 420px;
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #E3E6EB;
  border-left: 3px solid var(--edge);
  min-width: 0;
}

.cal-day-card.ms {
  background: #FFFBF5;
  border-style: dashed;
  border-color: #F3D2AE;
}

.cal-day-card > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.cal-day-card b {
  font-size: 13px;
}

.cal-day-card em {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.cal-list-grid {
  min-width: 900px;
}

.cal-list-head, .cal-list a {
  display: grid;
  grid-template-columns: 110px 70px minmax(220px, 2fr) 110px 90px 130px 120px 110px;
  align-items: center;
}

.cal-list-head {
  background: #F6F7F9;
  font-size: 12px;
  color: #4A5361;
}

.cal-list-head span {
  padding: 8px;
}

.cal-list-head span:first-child {
  padding-left: 16px;
}

.cal-list a {
  border-top: 1px solid #EEF0F3;
  font-size: 13px;
}

.cal-list a > span {
  padding: 8px;
  min-width: 0;
}

.cal-list a > span:first-child {
  padding-left: 16px;
}

.cal-list .strong {
  font-weight: 600;
}

.cal-list .req {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-list .req > span {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  min-width: 0;
}

.cal-empty {
  padding: 40px;
  text-align: center;
  font-size: 13px;
  color: #6B7482;
  display: block;
}

.cal-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #4A5361;
}

.cal-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-legend i {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #fff;
  border: 1px solid #E3E6EB;
  border-left-width: 3px;
}

.cal-legend .z {
  border-left-color: #0F766E;
}

.cal-legend .l {
  border-left-color: #6D3FD0;
}

.cal-legend .e {
  border-left-color: #B45309;
}

.cal-legend .m {
  background: #FFFBF5;
  border: 1px dashed #F3D2AE;
}

.cal-legend .o {
  background: #F3F4F6;
  border: 0;
}

.cal-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 27, 0.45);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 24px;
}

.cal-modal .box {
  background: #fff;
  border-radius: 14px;
  width: 420px;
  max-width: 100%;
  box-shadow: 0 12px 32px rgba(16, 21, 29, 0.16);
  padding: 20px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cal-modal h2 {
  margin: 0;
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
}

.cal-modal p {
  margin: -8px 0 0;
  font-size: 13px;
  color: #4A5361;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.cal-create {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.hub .cal-modal a.cal-type {
  height: 38px;
  padding: 0 12px;
  border: 1px solid #CDD2DA;
  border-radius: 6px;
  color: #141A23;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.hub .cal-modal a.cal-type:hover {
  border-color: #3442C9;
  background: #ECEEFC;
  color: #141A23;
  text-decoration: none;
}

.cal-modal a.cal-type i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.cal-modal a.cal-type i.z {
  background: #0F766E;
}

.cal-modal a.cal-type i.l {
  background: #6D3FD0;
}

.cal-modal a.cal-type i.e {
  background: #B45309;
}

.cal-modal .acts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.cal-modal .acts button {
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid #CDD2DA;
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: #141A23;
}

.cal-modal .acts button:hover {
  background: #F0F2F5;
}

.tk-page {
  margin: -20px -24px -48px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tk-head {
  background: #FFFFFF;
  border-bottom: 1px solid #E3E6EB;
  padding: 20px 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tk-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tk-head h1 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

.tk-top > div > span, .tk-who > span {
  font-size: 13px;
  color: #4A5361;
}

.tk-who {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tk-who > span {
  font-size: 12px;
  color: #6B7482;
}

.tk-seg {
  display: inline-flex;
  padding: 3px;
  background: #F0F2F5;
  border-radius: 7px;
  gap: 2px;
  flex-wrap: wrap;
}

.tk-seg .tk-pill {
  height: 30px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #4A5361;
}

.tk-seg .tk-pill.on {
  background: #fff;
  color: #141A23;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 21, 29, 0.1);
}

.tk-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.tk-kpis div {
  border: 1px solid #E3E6EB;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tk-kpis span {
  font-size: 13px;
  color: #4A5361;
}

.tk-kpis b {
  font-size: 20px;
}

.tk-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.tk-pill {
  height: 30px;
  padding: 0 12px;
  border-radius: 15px;
  border: 1px solid #CDD2DA;
  background: #fff;
  color: #141A23;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.tk-pill.on {
  background: #141A23;
  color: #fff;
  border-color: #141A23;
}

.tk-rule {
  width: 1px;
  height: 20px;
  background: #E3E6EB;
  margin: 0 4px;
}

.tk-body {
  padding: 20px 32px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.tk-warn {
  border: 1px solid #F2D9A6;
  background: #FCF0D9;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: #5C3600;
}

.tk-body section {
  background: #fff;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  overflow: hidden;
  min-width: 0;
}

.tk-group {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #EEF0F3;
}

.tk-group b {
  font-size: 14px;
}

.tk-group span {
  font-size: 12px;
  color: #4A5361;
  background: #EEF0F3;
  padding: 1px 7px;
  border-radius: 8px;
}

.tk-scroll {
  overflow-x: auto;
}

.tk-item {
  border-top: 1px solid #EEF0F3;
  min-width: 860px;
}

.tk-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(240px, 1.6fr) 110px 70px 130px minmax(190px, auto);
  align-items: center;
  font-size: 13px;
}

.tk-row > span:first-child, .tk-row > a {
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tk-row > a {
  padding: 10px 8px;
  color: #141A23;
  text-decoration: none;
}

.tk-page a:hover {
  color: #3442C9;
  text-decoration: none;
}

.tk-row b.done {
  text-decoration: line-through;
  color: #6B7482;
}

.tk-row small {
  font-size: 11px;
  color: #6B7482;
}

.tk-row a > span {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  min-width: 0;
}

.tk-row a i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex: none;
}

.tk-row a em {
  height: 17px;
  padding: 0 5px;
  border-radius: 3px;
  font-style: normal;
  display: inline-flex;
  align-items: center;
}

.tk-row a > b {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tk-row .due {
  padding: 8px;
  font-size: 12px;
}

.tk-row .pr {
  padding: 8px;
  font-size: 11px;
  font-weight: 600;
}

.tk-row .acts {
  padding: 8px 20px 8px 8px;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.tk-mini {
  height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid #CDD2DA;
  background: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.tk-mini.primary {
  background: #3442C9;
  color: #fff;
  border-color: #3442C9;
}

.tk-mini.danger {
  color: #B42520;
  border-color: #F4C4C1;
}

.tk-block {
  margin: 0 20px 10px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #FCE8E7;
  color: #5E1411;
  font-size: 12px;
}

.tk-empty {
  background: #fff;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  padding: 40px;
  text-align: center;
  font-size: 14px;
  color: #4A5361;
}

.tk-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 27, 0.45);
  display: grid;
  place-items: center;
  z-index: 50;
  padding: 24px;
}

.tk-modal .box {
  background: #fff;
  border-radius: 14px;
  width: 480px;
  max-width: 100%;
  box-shadow: 0 12px 32px rgba(16, 21, 29, 0.16);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 24px 0;
}

.tk-modal b {
  font-size: 18px;
}

.tk-modal .box > span {
  font-size: 13px;
  color: #4A5361;
}

.tk-modal label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 8px;
}

.tk-modal em {
  color: #B42520;
  font-style: normal;
}

.tk-modal textarea {
  padding: 10px 12px;
  border: 1px solid #CDD2DA;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}

.tk-modal .err {
  font-size: 12px;
  color: #B42520;
}

.tk-modal .box > div {
  padding: 16px 0;
  border-top: 1px solid #EEF0F3;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.tk-modal .box > div button {
  height: 36px;
  padding: 0 14px;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.tk-modal #cancelBlock {
  border: 1px solid #CDD2DA;
  background: #fff;
}

.tk-modal #confirmBlock {
  border: 0;
  background: #B42520;
  color: #fff;
  font-weight: 600;
}

.q-page {
  margin: -20px -24px -48px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.q-head {
  background: #FFFFFF;
  border-bottom: 1px solid #E3E6EB;
  padding: 20px 32px 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

.q-head h1 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

.q-head span {
  display: block;
  font-size: 13px;
  color: #4A5361;
  max-width: 720px;
}

.q-body {
  padding: 20px 32px 48px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  min-width: 0;
}

.q-body nav {
  flex: 0 0 210px;
  background: #fff;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 16px;
}

.q-body nav button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}

.q-body nav button.on {
  background: #ECEEFC;
  font-weight: 600;
}

.q-body nav button:hover {
  background: #F6F7F9;
}

.q-body nav button span {
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.q-body nav i {
  width: 16px;
  text-align: center;
  font-style: normal;
  font-weight: 700;
}

.q-body nav b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #EEF0F3;
  color: #141A23;
}

.q-body nav b.hot {
  background: #FCE8E7;
  color: #B42520;
}

.q-body nav b.zero {
  background: #F6F7F9;
  color: #9AA2AE;
}

.q-body section {
  flex: 1 1 360px;
  min-width: 0;
  background: #fff;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  overflow: hidden;
}

.q-bar {
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid #EEF0F3;
}

.q-bar b {
  font-size: 16px;
}

.q-bar > div span {
  display: block;
  font-size: 12px;
  color: #4A5361;
}

.q-count {
  font-size: 12px;
  color: #4A5361;
  font-variant-numeric: tabular-nums;
}

.q-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #EEF0F3;
}

.q-filters input, .q-filters select, .q-filters button {
  height: 34px;
  border: 1px solid #CDD2DA;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  background: #FFFFFF;
  color: #141A23;
}

.q-filters input {
  width: 220px;
  max-width: 100%;
  padding: 0 12px;
}

.q-filters select {
  padding: 0 8px;
  cursor: pointer;
}

.q-filters select.on {
  border-color: #3442C9;
  background: #ECEEFC;
}

.q-filters button {
  padding: 0 12px;
  cursor: pointer;
  font-weight: 500;
}

.q-filters button:hover {
  background: #F0F2F5;
}

.q-bulk {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 8px 6px 12px;
  border-radius: 8px;
  background: #141A23;
  color: #fff;
  font-size: 13px;
  flex-wrap: wrap;
}

.q-bulk span {
  color: #fff;
}

.q-bulk select, .q-bulk input {
  height: 28px;
  padding: 0 8px;
  border-radius: 5px;
  border: 0;
  font: inherit;
  font-size: 12px;
}

.q-bulk input {
  width: 110px;
}

.q-bulk button {
  height: 28px;
  padding: 0 10px;
  border-radius: 5px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.q-bulk #apply {
  border: 0;
  background: #6B78F0;
  color: #fff;
  font-weight: 600;
}

.q-bulk #tagBtn {
  border: 1px solid #3A4350;
  background: transparent;
  color: #fff;
}

.q-bulk #clear {
  border: 0;
  background: transparent;
  color: #9AA3B0;
}

.q-scroll {
  overflow-x: auto;
}

.q-table {
  min-width: 980px;
}

.q-headrow, .q-row {
  display: grid;
  grid-template-columns: 44px minmax(240px, 2fr) 120px 110px 120px 120px 140px minmax(160px, 1.2fr) 70px;
  align-items: center;
}

.q-headrow {
  background: #F6F7F9;
  font-size: 12px;
  color: #4A5361;
}

.q-headrow span, .q-row > span {
  padding: 8px;
  min-width: 0;
}

.q-headrow label, .q-row > label {
  padding: 8px 0 8px 18px;
}

.q-row {
  border-top: 1px solid #EEF0F3;
  font-size: 13px;
}

.q-row.on {
  background: #F5F6FE;
}

.q-row .req {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.q-row .req > span {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  flex-wrap: wrap;
}

.q-row .req i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.q-row .req em {
  height: 17px;
  padding: 0 5px;
  border-radius: 3px;
  font-style: normal;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.q-row .req > b {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.q-row .tag {
  height: 17px;
  padding: 0 5px;
  border-radius: 3px;
  background: #141A23;
  color: #fff;
  display: inline-flex;
  align-items: center;
}

.q-page a.mono, .q-page a.open {
  color: #3442C9;
  text-decoration: none;
  font-weight: 600;
}

.q-page a.open {
  font-size: 12px;
  padding-right: 16px;
  text-align: right;
}

.q-row .when {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.q-row .when small {
  font-size: 11px;
  color: #6B7482;
}

.q-row .owner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.q-row .owner i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  display: grid;
  place-items: center;
  color: #fff;
  background: #9AA2AE;
}

.q-row .note {
  font-size: 12px;
  line-height: 17px;
  overflow-wrap: anywhere;
}

.q-empty {
  padding: 48px 20px;
  text-align: center;
  font-size: 14px;
  color: #4A5361;
}

.q-body section > p {
  margin: 0;
  padding: 10px 20px;
  border-top: 1px solid #EEF0F3;
  font-size: 12px;
  color: #6B7482;
}

.st-page {
  margin: -20px -24px -48px;
  min-width: 0;
  color: #141A23;
}

.st-head {
  background: #FFFFFF;
  border-bottom: 1px solid #E3E6EB;
  padding: 20px 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.st-head h1 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}

.st-head > span {
  font-size: 13px;
  color: #4A5361;
}

.st-body {
  padding: 20px 32px 48px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  min-width: 0;
}

.st-body nav {
  flex: 0 0 200px;
  background: #FFFFFF;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 16px;
}

body.hub .hub-main .st-body nav a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 8px 12px;
  border-radius: 6px;
  color: #141A23;
  text-decoration: none;
}

body.hub .hub-main .st-body nav a.on {
  background: #ECEEFC;
}

body.hub .hub-main .st-body nav a:hover {
  background: #F6F7F9;
  color: #141A23;
  text-decoration: none;
}

.st-body nav b {
  font-size: 14px;
  font-weight: 500;
}

.st-body nav a.on b {
  font-weight: 600;
}

.st-body nav .mono {
  font-size: 10px;
  color: #6B7482;
}

.st-main {
  flex: 1 1 360px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.st-card {
  background: #FFFFFF;
  border: 1px solid #E3E6EB;
  border-radius: 10px;
  overflow: hidden;
  min-width: 0;
}

.st-card.pad {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.st-card.calc {
  gap: 12px;
}

.st-card.focus {
  border-color: #3442C9;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.st-card h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.st-card .sub, .st-card-head span {
  font-size: 12px;
  color: #4A5361;
  line-height: 18px;
}

.st-card-head {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.st-card-head.flush {
  padding-bottom: 0;
}

.st-card-head > div, .st-card.pad > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.st-card > p, .st-card-foot {
  margin: 0;
  padding: 12px 20px;
  border-top: 1px solid #EEF0F3;
  font-size: 12px;
  color: #4A5361;
  line-height: 18px;
}

.st-card-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.st-scroll {
  overflow-x: auto;
}

.st-grid {
  display: grid;
  align-items: center;
  font-size: 13px;
}

.st-grid.head {
  background: #F6F7F9;
  font-size: 12px;
  color: #4A5361;
}

.st-grid.head > * {
  padding: 8px;
}

.st-grid:not(.head) > * {
  padding: 10px 8px;
  min-width: 0;
}

.st-grid:not(.head):not(.add) {
  border-top: 1px solid #EEF0F3;
}

.st-grid.sla {
  grid-template-columns: minmax(200px, 1.4fr) 140px 130px 130px 110px 130px;
  min-width: 760px;
}

.st-grid.ex {
  grid-template-columns: 140px 170px minmax(160px, 1fr) 130px 60px;
  min-width: 660px;
}

.st-grid.brand {
  grid-template-columns: 70px 100px minmax(160px, 1fr) 170px 120px 110px;
  min-width: 720px;
}

.st-grid.tpl {
  grid-template-columns: 44px minmax(0, 1fr) 130px 100px 110px;
}

.st-grid.perm {
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, minmax(110px, 1fr));
  min-width: 720px;
}

.st-grid.users {
  grid-template-columns: minmax(140px, 1.1fr) minmax(180px, 1.4fr) minmax(150px, 1fr) 160px 110px;
  min-width: 760px;
}

.st-grid.team {
  grid-template-columns: 140px minmax(180px, 1fr) 110px;
  min-width: 460px;
}

.st-grid.leg {
  grid-template-columns: 90px 170px 130px 120px minmax(180px, 1fr) 150px;
  min-width: 860px;
}

.st-grid > :first-child {
  padding-left: 20px;
}

.st-grid.sla > :last-child, .st-grid.brand > :last-child, .st-grid.leg > :last-child, .st-grid.users > :last-child, .st-grid.team > :last-child {
  padding-right: 20px;
}

.st-grid.ex.add > * {
  padding: 8px;
}

.st-grid.ex.add > :first-child {
  padding-left: 20px;
}

.st-grid.tpl:not(.head) > * {
  padding: 6px 8px;
}

.st-grid.tpl > :first-child {
  padding-left: 20px;
}

.st-grid.perm:not(.head) > * {
  padding: 9px 8px;
}

.st-grid.perm.head > *, .st-grid.perm .yes, .st-grid.perm .no {
  text-align: center;
}

.st-grid.perm > :first-child {
  text-align: left;
}

.st-grid small {
  display: block;
  color: #6B7482;
  font-size: 11px;
}

.st-grid.sla > :first-child {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.st-grid.sla.empty {
  background: #FFFCF5;
}

.st-grid.brand.dim, .st-grid.users.dim, .st-grid.team.dim {
  opacity: 0.55;
}

.st-grid.ex .kind {
  font-size: 12px;
  color: #4A5361;
}

.st-grid.ex .name {
  font-weight: 500;
}

.st-grid.ex .state {
  font-size: 12px;
  font-weight: 600;
}

.st-grid.ex .mono, .st-grid.sla .mono, .st-grid.leg .mono, .st-grid.perm .mono, .st-grid.tpl .mono {
  font-size: 12px;
}

.st-grid.sla .mono {
  color: #6B7482;
  font-size: 11px;
}

.st-page input,
.st-page select {
  color: #141A23;
  background: #FFFFFF;
  font: inherit;
}

.st-page input:focus,
.st-page select:focus {
  outline: none;
  border-color: #3442C9 !important;
  box-shadow: 0 0 0 3px #CDD2F7;
}

.st-ctl {
  height: 38px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid #CDD2DA;
  border-radius: 6px;
  font-size: 14px;
  background: #FFFFFF;
}

.st-ctl.mono {
  padding: 0 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.st-ctl.date {
  padding: 0 10px;
}

.st-inline {
  height: 32px;
  width: 100%;
  padding: 0 8px;
  border: 1px solid #E3E6EB;
  border-radius: 5px;
  font-size: 13px;
  background: #FFFFFF;
}

.st-inline.tight {
  height: 32px;
  padding: 0 6px;
  border-color: #CDD2DA;
  font-size: 12px;
  border-radius: 5px;
}

.st-inline.code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
}

.st-inline:disabled {
  background: #F6F7F9;
  color: #4A5361;
  cursor: not-allowed;
}

.st-grid.leg select {
  height: 30px;
  width: 100%;
  padding: 0 6px;
  border: 1px solid #CDD2DA;
  border-radius: 5px;
  font-size: 12px;
  background: #FFFFFF;
}

.st-color {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid #E3E6EB;
  border-radius: 5px;
  background: none;
  cursor: pointer;
}

.st-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

.st-fields.inset {
  padding: 0 20px 16px;
}

.st-fields label, .st-trial label, .st-hook {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.st-fields label > span, .st-hook > span {
  font-size: 13px;
  font-weight: 500;
}

.st-note {
  font-size: 12px;
  color: #4A5361;
  background: #F6F7F9;
  padding: 10px 12px;
  border-radius: 6px;
  line-height: 18px;
}

.st-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.st-btn {
  height: 36px;
  padding: 0 14px;
  border: 1px solid #CDD2DA;
  border-radius: 6px;
  background: #FFFFFF;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  color: #141A23;
}

.st-btn.primary {
  height: 34px;
  border: 0;
  background: #3442C9;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.st-btn.primary.lg {
  height: 36px;
  font-size: 14px;
}

.st-btn.sm {
  height: 32px;
  margin-right: 12px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: #3442C9;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.st-btn.ghost {
  height: 34px;
  font-size: 13px;
  font-weight: 500;
}

.st-btn.dash {
  height: 32px;
  padding: 0 12px;
  border: 1px dashed #CDD2DA;
  font-size: 13px;
}

.st-btn.save {
  height: 32px;
  padding: 0 14px;
  border: 0;
  background: #3442C9;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.err {
  color: #B42520;
  font-size: 12px;
}

.st-week {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.st-day {
  width: 96px;
  height: 64px;
  border-radius: 8px;
  border: 1px solid #E3E6EB;
  background: #F6F7F9;
  font: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #141A23;
}

.st-day b {
  font-size: 13px;
  font-weight: 600;
}

.st-day span {
  font-size: 11px;
  color: #6B7482;
}

.st-day.on {
  background: #F5FBF7;
  border-color: #BFE3CD;
}

.st-day.on span {
  color: #17673F;
}

.st-grid.ex.add, .st-grid.team.add {
  background: #FAFBFC;
  border-top: 1px solid #EEF0F3;
}

.st-grid.team.add > * {
  padding: 8px;
}

.st-grid.team.add > :first-child {
  padding-left: 20px;
}

.st-user-find {
  padding: 0 20px 16px;
  max-width: 360px;
}

.st-grid.ex .x {
  border: 0;
  background: transparent;
  color: #B42520;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  width: auto;
  height: auto;
}

.st-trial {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.st-trial label > span {
  font-size: 12px;
  font-weight: 500;
}

.st-trial input {
  height: 36px;
  padding: 0 8px;
  border: 1px solid #CDD2DA;
  border-radius: 6px;
  font-size: 13px;
  width: auto;
}

.st-trial input.n {
  width: 90px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.st-trial .result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 14px;
  border-radius: 8px;
  background: #ECEEFC;
}

.st-trial .result span {
  font-size: 11px;
  color: #2B3AB8;
}

.st-trial .result b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 16px;
  font-weight: 600;
  color: #1F2A8A;
}

.st-steps {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.st-steps span {
  min-width: 62px;
  padding: 6px;
  border-radius: 5px;
  font-size: 11px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #ECEEFC;
  color: #1F2A8A;
}

.st-steps b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 11px;
}

.st-steps .off {
  background: #F0F2F5;
  color: #6B7482;
}

.st-steps .end {
  background: #3442C9;
  color: #fff;
}

.st-switch {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  border: 0;
  background: #CDD2DA;
  position: relative;
  cursor: pointer;
  padding: 0;
}

.st-switch:after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
}

.st-switch.on {
  background: #3442C9;
}

.st-switch:disabled {
  cursor: default;
}

.st-switch.on:after {
  left: 18px;
}

.st-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 20px 0;
  border-bottom: 1px solid #EEF0F3;
}

.st-tabs button {
  padding: 8px 14px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #4A5361;
  cursor: pointer;
}

.st-tabs button.on {
  color: #141A23;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 #3442C9;
}

.st-grid.tpl .acts {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
  padding-right: 20px;
}

.st-grid.tpl .acts button {
  width: 26px;
  height: 26px;
  border: 1px solid #E3E6EB;
  border-radius: 5px;
  background: #FFFFFF;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}

.st-grid.tpl .acts button.rm {
  color: #B42520;
}

.st-grid.tpl label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.st-grid.tpl label input {
  accent-color: #3442C9;
  width: auto;
  height: auto;
}

.st-grid.tpl .mono {
  color: #4A5361;
}

.st-tax {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.st-tax .st-card {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
}

.st-tax .title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.st-tax .title b {
  font-size: 15px;
  font-weight: 600;
}

.st-tax .title .mono {
  font-size: 11px;
  color: #6B7482;
}

.st-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.st-pills span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 4px 0 10px;
  border-radius: 14px;
  border: 1px solid #E3E6EB;
  font-size: 12px;
  background: #FFFFFF;
}

.st-pills span.off {
  background: #F6F7F9;
  color: #9AA2AE;
  text-decoration: line-through;
}

.st-pills button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6B7482;
  font-size: 11px;
  cursor: pointer;
}

.st-add {
  display: flex;
  gap: 6px;
}

.st-page .h-chip {
  height: 22px;
  gap: 4px;
  padding: 0 7px;
  font-size: 11px;
  border: 0;
}

.st-add input {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border: 1px solid #CDD2DA;
  border-radius: 6px;
  font-size: 13px;
}

.st-add select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid #CDD2DA;
  border-radius: 6px;
  font-size: 12px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  background: #FFFFFF;
}

.st-add button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: #141A23;
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.st-card small {
  font-size: 11px;
  color: #6B7482;
}

.st-card.cap {
  max-width: 720px;
  gap: 16px;
}

.st-card.note {
  max-width: 820px;
  gap: 16px;
}

.st-cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px;
  gap: 16px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #EEF0F3;
}

.st-cap b {
  font-size: 14px;
  font-weight: 500;
}

.st-cap small {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: #6B7482;
}

.st-cap input {
  height: 36px;
  padding: 0 10px;
  border: 1px solid #CDD2DA;
  border-radius: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px;
  text-align: right;
}

.st-grid.perm .yes {
  color: #17673F;
  font-weight: 600;
}

.st-grid.perm .no {
  color: #CDD2DA;
  font-weight: 600;
}

.st-grant {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #EEF0F3;
  font-size: 13px;
}

.st-grant button {
  border: 0;
  background: transparent;
  color: #B42520;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  height: auto;
  padding: 0;
}

.st-hook input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid #CDD2DA;
  border-radius: 6px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  background: #F6F7F9;
}

.st-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #EEF0F3;
  cursor: pointer;
}

.st-toggle b {
  font-size: 14px;
  font-weight: 400;
}

.st-toggle small {
  display: block;
  color: #6B7482;
  font-size: 11px;
  font-weight: 400;
}

.st-toggle input {
  accent-color: #3442C9;
  width: 16px;
  height: 16px;
}

.st-empty {
  padding: 28px 20px;
  color: #6B7482;
  font-size: 13px;
}

.st-version {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: #4A5361;
}