/* [project]/src/app/globals.css [app-client] (css) */
:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  --app-font: Helvetica, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--app-font);
  color: #17191c;
  background: #f6f7f9;
  font-size: 11px;
}

* {
  box-sizing: border-box;
}

body {
  color: #17191c;
  background: #f6f7f9;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

input, select, textarea, button {
  font: inherit;
}

input, select, textarea {
  background: #fff;
  border: 1px solid #d7dbe0;
  border-radius: 8px;
  width: 100%;
  padding: 10px 12px;
}

button {
  cursor: pointer;
}

.shell {
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  display: grid;
}

.sidebar {
  color: #fff;
  background: #14171a;
  flex-direction: column;
  height: 100vh;
  min-height: 100vh;
  padding: 20px 14px;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}

.brand {
  flex: none;
  margin-bottom: 18px;
  font-size: 20px;
  font-weight: 700;
}

.nav {
  gap: 6px;
  display: grid;
}

.nav-grouped {
  scrollbar-width: thin;
  scrollbar-color: #394049 transparent;
  min-height: 0;
  padding-right: 4px;
  overflow: hidden auto;
}

.nav-grouped::-webkit-scrollbar {
  width: 6px;
}

.nav-grouped::-webkit-scrollbar-thumb {
  background: #394049;
  border-radius: 999px;
}

.nav-primary {
  border-bottom: 1px solid #2a2f35;
  gap: 4px;
  padding-bottom: 10px;
  display: grid;
}

.nav a {
  color: #d9dde2;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 14px;
  display: block;
}

.nav a:hover {
  color: #fff;
  background: #24282d;
}

.nav-groups {
  gap: 5px;
  padding-top: 9px;
  display: grid;
}

.nav-group {
  border-radius: 10px;
}

.nav-group summary {
  cursor: pointer;
  color: #f3f4f6;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 9px;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 7px 9px;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
  display: grid;
}

.nav-group summary::-webkit-details-marker {
  display: none;
}

.nav-group summary:hover, .nav-group[open] > summary {
  background: #202428;
}

.nav-group-icon {
  color: #aeb6c0;
  letter-spacing: .02em;
  background: #2b3036;
  border-radius: 6px;
  place-items: center;
  width: 28px;
  height: 24px;
  font-size: 9px;
  font-weight: 800;
  display: grid;
}

.nav-chevron {
  color: #8f98a3;
  text-align: center;
  transition: transform .16s;
}

.nav-group[open] .nav-chevron {
  transform: rotate(180deg);
}

.nav-group-items {
  gap: 2px;
  padding: 4px 0 5px 36px;
  display: grid;
}

.nav-group-items a {
  color: #c9d0d8;
  border-left: 1px solid #30363d;
  border-radius: 0 7px 7px 0;
  padding: 7px 9px;
  font-size: 13px;
}

.nav-group-items a:hover {
  border-left-color: #7c8794;
}

.content {
  padding: 32px;
}

.page-header {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  display: flex;
}

.page-header h1 {
  margin: 0;
  font-size: 28px;
}

.card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 2px #00000008;
}

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

.metric {
  margin-top: 8px;
  font-size: 30px;
  font-weight: 700;
}

.muted {
  color: #6b7280;
}

.button {
  color: #fff;
  background: #17191c;
  border: 0;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 10px 14px;
  font-weight: 600;
  display: inline-flex;
}

.button.secondary {
  color: #17191c;
  background: #fff;
  border: 1px solid #d7dbe0;
}

.table-wrap {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid #edf0f2;
  padding: 12px 14px;
}

th {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
  background: #fafafa;
  font-size: 12px;
}

.form-grid {
  gap: 16px;
  max-width: 720px;
  display: grid;
}

.form-grid label {
  gap: 7px;
  font-weight: 600;
  display: grid;
}

.auth-page {
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  display: grid;
}

.auth-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  width: min(440px, 100%);
  padding: 28px;
}

.auth-card form {
  gap: 14px;
  display: grid;
}

.auth-card h1 {
  margin-top: 0;
}

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

@media (max-width: 800px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .content {
    padding: 20px;
  }
}

.stack {
  gap: 12px;
  display: grid;
}

.two-col {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.list {
  gap: 8px;
  margin-top: 16px;
  display: grid;
}

.list-row {
  border-bottom: 1px solid #edf0f2;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  display: flex;
}

.link-button {
  color: #6b7280;
  background: none;
  border: 0;
  padding: 4px;
}

h2 {
  margin-top: 0;
  font-size: 18px;
}

.content > h2 {
  margin-top: 28px;
}

@media (max-width: 640px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}

.form-inline {
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  display: flex;
}

.form-inline > input {
  width: auto;
  min-width: 220px;
}

.form-inline label {
  gap: 6px;
  display: grid;
}

.checkbox {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px !important;
  display: flex !important;
}

.checkbox input {
  width: auto;
}

.section-gap {
  margin-top: 24px;
}

.workspace {
  min-width: 0;
}

.brand {
  align-items: center;
  gap: 10px;
  display: flex;
}

.brand-mark {
  color: #111827;
  background: #fff;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-weight: 800;
  display: grid;
}

.brand small {
  color: #8f98a3;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 500;
  display: block;
}

.sidebar {
  flex-direction: column;
  height: 100vh;
  display: flex;
  position: sticky;
  top: 0;
}

.sidebar-footer {
  color: #9ca3af;
  border-top: 1px solid #2a2f35;
  flex: none;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  font-size: 12px;
  display: grid;
  overflow: hidden;
}

.sidebar-footer a {
  color: #fff;
  font-weight: 600;
}

.topbar {
  z-index: 20;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #f6f7f9f0;
  border-bottom: 1px solid #e5e7eb;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  height: 68px;
  padding: 12px 28px;
  display: flex;
  position: sticky;
  top: 0;
}

.global-search {
  align-items: center;
  gap: 8px;
  width: min(620px, 65vw);
  display: flex;
}

.global-search input {
  background: #fff;
  border-radius: 12px;
}

.topbar-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.topbar-link {
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
}

.button.compact {
  padding: 8px 10px;
  font-size: 13px;
}

.mobile-nav {
  display: none;
}

.auth-badge {
  letter-spacing: .09em;
  color: #4b5563;
  background: #f3f4f6;
  border-radius: 999px;
  margin-bottom: 8px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
  display: inline-block;
}

.auth-card label {
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  display: grid;
}

.auth-help {
  color: #6b7280;
  margin-bottom: 0;
  font-size: 12px;
}

.alert {
  border-radius: 10px;
  margin: 12px 0;
  padding: 11px 12px;
  font-size: 14px;
}

.alert.error {
  color: #9f1239;
  background: #fff1f2;
  border: 1px solid #fecdd3;
}

.form-card {
  max-width: 760px;
}

.search-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.result-list {
  gap: 0;
  display: grid;
}

.result-list a {
  border-bottom: 1px solid #edf0f2;
  gap: 3px;
  padding: 11px 0;
  display: grid;
}

.result-list span {
  color: #6b7280;
  font-size: 13px;
}

.result-list a:last-child {
  border-bottom: 0;
}

@media (max-width: 980px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: none;
  }

  .topbar {
    height: auto;
    padding: 10px 16px;
  }

  .global-search {
    width: 100%;
  }

  .topbar-link {
    display: none;
  }

  .mobile-nav {
    z-index: 15;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    gap: 6px;
    padding: 8px 14px;
    display: flex;
    position: sticky;
    top: 61px;
    overflow: auto;
  }

  .mobile-nav a {
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    flex: none;
    padding: 7px 10px;
    font-size: 12px;
  }

  .content {
    padding: 20px;
  }
}

@media (max-width: 700px) {
  .search-grid {
    grid-template-columns: 1fr;
  }

  .topbar-actions {
    display: none;
  }
}

.mobile-app {
  background: #f5f6f8;
  max-width: 640px;
  min-height: 100dvh;
  margin: 0 auto;
  padding-bottom: 82px;
  box-shadow: 0 0 0 1px #eceff2;
}

.m-header {
  z-index: 30;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: #fffffff5;
  border-bottom: 1px solid #e8ebef;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 10px 16px;
  display: flex;
  position: sticky;
  top: 0;
}

.m-header > div {
  display: grid;
}

.m-header span {
  color: #7b8490;
  font-size: 11px;
}

.m-header > a {
  background: #fff;
  border: 1px solid #e2e5e9;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
}

.m-content {
  padding: 18px 14px 28px;
}

.m-bottom {
  z-index: 40;
  width: min(640px, 100%);
  height: 68px;
  padding-bottom: env(safe-area-inset-bottom);
  background: #fffffff7;
  border-top: 1px solid #e2e5e9;
  grid-template-columns: repeat(5, 1fr);
  display: grid;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.m-bottom a {
  color: #4b5563;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  font-size: 19px;
  display: flex;
}

.m-bottom span {
  font-size: 10px;
}

.m-hero {
  padding: 8px 4px 20px;
}

.m-hero p, .m-hero h1 {
  margin: 0;
}

.m-hero p {
  color: #777f89;
  font-size: 13px;
}

.m-hero h1 {
  letter-spacing: -.03em;
  margin: 3px 0;
  font-size: 30px;
}

.m-hero span {
  color: #8b929b;
  font-size: 12px;
}

.m-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.m-card {
  background: #fff;
  border: 1px solid #e7eaee;
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 2px 8px #11182709;
}

.metric-card {
  flex-direction: column;
  justify-content: space-between;
  min-height: 112px;
  display: flex;
}

.metric-card small {
  color: #7a828c;
}

.metric-card strong {
  font-size: 17px;
  line-height: 1.2;
}

.m-section {
  margin-top: 22px;
}

.m-section h2 {
  margin: 0 0 10px;
  font-size: 16px;
}

.m-list {
  background: #fff;
  border: 1px solid #e7eaee;
  border-radius: 16px;
  display: grid;
  overflow: hidden;
}

.m-list > a, .m-list > div {
  border-bottom: 1px solid #eef0f2;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  font-size: 14px;
  display: flex;
}

.m-list > :last-child {
  border-bottom: 0;
}

.m-page-title {
  margin: 4px 2px 18px;
}

.m-page-title h1 {
  margin: 0;
  font-size: 27px;
}

.m-page-title p {
  color: #747d88;
  margin: 4px 0 0;
  font-size: 13px;
}

.m-center {
  text-align: center;
}

.m-clock {
  letter-spacing: -.05em;
  margin: 10px 0;
  font-size: 44px;
  font-weight: 800;
}

.m-primary, .m-danger {
  color: #fff;
  background: #111827;
  border: 0;
  border-radius: 14px;
  width: 100%;
  padding: 14px 18px;
  font-weight: 800;
}

.m-danger {
  background: #dc2626;
}

.m-form {
  gap: 11px;
  display: grid;
}

.m-form input, .m-form select, .m-form textarea {
  background: #fbfcfd;
  border-radius: 12px;
  padding: 12px;
}

.m-two {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.m-history {
  border-bottom: 1px solid #e8ebee;
  justify-content: space-between;
  align-items: center;
  padding: 12px 4px;
  display: flex;
}

.m-history > div {
  gap: 2px;
  display: grid;
}

.m-history span {
  color: #7b8490;
  font-size: 11px;
}

.m-request {
  margin-bottom: 9px;
}

.m-request > div, .m-project {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.m-request p, .m-task p {
  color: #737b86;
  margin: 8px 0 0;
  font-size: 12px;
}

.m-status {
  background: #eef0f2;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 800;
}

.m-status.approved, .m-status.paid {
  color: #166534;
  background: #dcfce7;
}

.m-status.pending {
  color: #92400e;
  background: #fef3c7;
}

.m-status.rejected {
  color: #991b1b;
  background: #fee2e2;
}

.m-project {
  margin-bottom: 9px;
}

.m-project > div {
  display: grid;
}

.m-project span {
  color: #7c8590;
  margin-top: 3px;
  font-size: 10px;
}

.m-project > b {
  font-size: 10px;
}

.m-task {
  margin-bottom: 9px;
}

.m-live {
  color: #16a34a;
  letter-spacing: .07em;
  font-size: 11px;
  font-weight: 900;
  display: inline-block;
}

.payslip {
  margin-bottom: 10px;
}

.payslip-head {
  justify-content: space-between;
  align-items: start;
  margin-bottom: 14px;
  display: flex;
}

.payslip-head > div {
  gap: 4px;
  display: grid;
}

.payslip-head strong {
  font-size: 23px;
}

.payslip-row {
  border-top: 1px solid #eff1f3;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  display: flex;
}

.m-profile-head {
  text-align: center;
  padding: 14px 0 22px;
}

.m-profile-head h1 {
  margin: 10px 0 3px;
  font-size: 24px;
}

.m-profile-head p {
  color: #7a828c;
  margin: 0;
  font-size: 12px;
}

.m-avatar {
  color: #fff;
  background: #111827;
  border-radius: 24px;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: auto;
  font-size: 28px;
  font-weight: 800;
  display: grid;
}

.profile-list {
  margin-bottom: 14px;
}

.profile-list div {
  align-items: start;
  gap: 3px;
  display: grid;
}

.profile-list span {
  color: #7a828c;
  font-size: 11px;
}

.profile-list b {
  font-size: 13px;
}

@media (min-width: 641px) {
  .mobile-app {
    border-radius: 24px;
    min-height: calc(100vh - 24px);
    margin-top: 12px;
    overflow: hidden;
  }

  .m-bottom {
    border-radius: 0 0 24px 24px;
    bottom: 12px;
  }
}

.m-actions {
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  display: flex;
}

.m-actions form {
  flex: 1;
}

.m-actions button, .m-actions a {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  justify-content: center;
  width: 100%;
  padding: 9px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.m-actions input {
  width: 100%;
  margin-bottom: 6px;
}

.m-unread {
  border-left: 4px solid #111827;
}

.m-error {
  color: #b91c1c;
  font-size: 12px;
}

.m-card small + small {
  margin-top: 6px;
  display: block;
}

.m-avatar-img {
  object-fit: cover;
  border: 1px solid #e5e7eb;
  border-radius: 24px;
  width: 72px;
  height: 72px;
  margin: auto;
}

.m-check {
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  display: flex;
}

.m-check input {
  width: auto;
}

.qr-stage {
  place-items: center;
  min-height: 360px;
  display: grid;
}

.qr-stage canvas {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.training-list > a {
  gap: 12px;
}

.training-list > a > div:first-child {
  gap: 4px;
  display: grid;
}

.training-list span {
  color: #7b8490;
  font-size: 11px;
}

.training-score-mini {
  justify-items: end;
  gap: 2px;
  display: grid !important;
}

.training-score-mini b {
  font-size: 20px;
}

.training-score-mini small {
  color: #6b7280;
  font-size: 9px;
}

.training-metrics .metric-card {
  min-height: 92px;
}

.training-material {
  margin-bottom: 12px;
  padding: 12px;
}

.training-material-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.training-material-head > div {
  gap: 2px;
  display: grid;
}

.training-material-head small {
  color: #7b8490;
  font-size: 10px;
}

.training-player video {
  background: #0b0b0c;
  border-radius: 12px;
  width: 100%;
}

.training-player iframe {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  width: 100%;
  height: 520px;
}

.training-progress-line {
  color: #6b7280;
  justify-content: space-between;
  gap: 8px;
  padding-top: 7px;
  font-size: 11px;
  display: flex;
}

.pdf-controls {
  text-align: center;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  display: grid;
}

.pdf-controls button {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 7px;
}

.quiz-question {
  border-top: 1px solid #eef0f2;
  gap: 9px;
  padding: 14px 0;
  display: grid;
}

.quiz-question:first-of-type {
  border-top: 0;
}

.quiz-question label {
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  display: flex;
}

.quiz-question input {
  width: auto;
  margin-top: 3px;
}

.m-note {
  color: #4b5563;
  font-size: 12px;
}

.compliance-good {
  color: #166534;
  font-weight: 800;
}

.compliance-risk {
  color: #991b1b;
  font-weight: 800;
}

@media (max-width: 640px) {
  .training-player iframe {
    height: 64vh;
  }
}

.certificate {
  text-align: center;
  background: #fff;
  border: 8px double #111827;
  border-radius: 8px;
  max-width: 820px;
  margin: 30px auto;
  padding: 54px;
}

.certificate h1 {
  letter-spacing: .12em;
  font-size: 28px;
}

.certificate h2 {
  margin: 18px 0;
  font-size: 30px;
}

.public-verify {
  text-align: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  max-width: 680px;
  margin: 80px auto;
  padding: 32px;
}

.metric-big {
  margin-top: 10px;
  font-size: 34px;
  display: block;
}

.check {
  align-items: center;
  gap: 8px;
  display: flex !important;
}

.check input {
  width: auto;
}

@media print {
  .certificate {
    box-shadow: none;
    border: 8px double #111827;
    flex-direction: column;
    justify-content: center;
    max-width: none;
    min-height: 90vh;
    margin: 0;
    display: flex;
  }

  .m-header, .m-bottom {
    display: none !important;
  }
}

.print-report {
  background: #fff;
  max-width: 1100px;
  margin: 30px auto;
  padding: 28px;
}

.print-report table {
  border-collapse: collapse;
  width: 100%;
}

.print-report th, .print-report td {
  text-align: left;
  border: 1px solid #d1d5db;
  padding: 7px;
  font-size: 12px;
}

.print-report section {
  page-break-inside: avoid;
  margin: 24px 0;
}

@media print {
  .print-report {
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .print-report .muted {
    display: none;
  }
}

.edit-popover {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  min-width: min(420px, 80vw);
  margin-top: 8px;
  padding: 14px;
  box-shadow: 0 12px 30px #00000014;
}

details > summary {
  cursor: pointer;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

.notice-success {
  background: #f0fff3;
  border: 1px solid #b7dfbd;
  border-radius: 10px;
  padding: 10px 12px;
}

.notice-error {
  background: #fff4f4;
  border: 1px solid #efb1b1;
  border-radius: 10px;
  padding: 10px 12px;
}

.m-attendance-action {
  width: 100%;
}

.m-attendance-diagnostic {
  text-align: center;
  color: #667085;
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.4;
}

.m-attendance-status {
  text-align: center;
  color: #166534;
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 700;
}

.m-error {
  text-align: center;
  white-space: pre-wrap;
  color: #b42318;
  margin: 10px 0 0;
  font-size: 13px;
}

.m-primary:disabled, .m-danger:disabled {
  opacity: .65;
  cursor: wait;
}

.lifecycle-badge {
  letter-spacing: .04em;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.lifecycle-badge.onboarding {
  color: #17653a;
  background: #e8f5ee;
}

.lifecycle-badge.offboarding {
  color: #9b3828;
  background: #fff0ec;
}

.lifecycle-progress {
  background: #edf0f2;
  border-radius: 999px;
  height: 7px;
  margin: 10px 0 14px;
  overflow: hidden;
}

.lifecycle-progress > span {
  background: #20252a;
  border-radius: 999px;
  height: 100%;
  display: block;
}

.lifecycle-card-head {
  align-items: flex-start;
}

.lifecycle-head-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.lifecycle-cancel {
  position: relative;
}

.lifecycle-cancel > summary {
  cursor: pointer;
  list-style: none;
}

.lifecycle-cancel > summary::-webkit-details-marker {
  display: none;
}

.lifecycle-cancel-form {
  z-index: 30;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  width: min(420px, 80vw);
  padding: 14px;
  position: absolute;
  top: 40px;
  right: 0;
  box-shadow: 0 16px 40px #00000024;
}

.lifecycle-cancel-form textarea {
  min-height: 90px;
}

@media (max-width: 700px) {
  .lifecycle-head-actions {
    justify-content: flex-start;
  }

  .lifecycle-cancel-form {
    width: auto;
    position: fixed;
    top: 90px;
    left: 14px;
    right: 14px;
  }
}

.hr-expiry-panel {
  background: #fffdf7;
  border-color: #ead9a6;
  margin-bottom: 18px;
}

.hr-expiry-panel .page-header {
  margin-bottom: 10px;
}

.hr-expiry-list {
  gap: 6px;
  display: grid;
}

.hr-expiry-row {
  color: inherit;
  background: #fff;
  border: 1px solid #ece7da;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 11px 12px;
  display: flex;
}

.hr-expiry-row:hover {
  border-color: #c9b87f;
}

.hr-expiry-row.warning {
  background: #fff9e8;
  border-color: #efd88a;
}

.hr-expiry-row.urgent {
  background: #fff1ef;
  border-color: #efb0a8;
}

.hr-expiry-row span {
  color: #6b7280;
  font-size: 13px;
}

.hr-expiry-date {
  text-align: right;
  white-space: nowrap;
  gap: 2px;
  display: grid;
}

.hr-expiry-date small {
  color: #9b5a22;
  font-size: 11px;
  font-weight: 800;
}

@media (max-width: 640px) {
  .hr-expiry-row {
    align-items: flex-start;
  }

  .hr-expiry-date {
    font-size: 12px;
  }
}

.access-actions {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  display: flex;
}

.access-role-form {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.access-role-form select {
  min-width: 180px;
}

.access-role-form input {
  min-width: 210px;
}

.access-status {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.access-status.active {
  color: #17653a;
  background: #e9f7ee;
}

.access-status.inactive {
  color: #68707a;
  background: #f2f3f5;
}

.signature-box {
  gap: 10px;
  display: grid;
}

.signature-canvas {
  touch-action: none;
  background: #fff;
  border: 2px dashed #c8ced6;
  border-radius: 12px;
  width: 100%;
  height: 220px;
}

.contract-document pre {
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: inherit;
  line-height: 1.7;
}

.contract-signature-image {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  max-width: 100%;
  height: auto;
  max-height: 220px;
  display: block;
}

.m-contract-card {
  color: inherit;
  text-decoration: none;
  display: block;
}

.contract-admin-signature {
  border-top: 1px solid #dfe3e7;
  margin-top: 36px;
  padding-top: 18px;
}

@media print {
  .sidebar, .topbar, .mobile-nav, .page-header .form-inline {
    display: none !important;
  }

  .shell, .workspace {
    display: block !important;
  }

  .content {
    padding: 0 !important;
  }

  .contract-print {
    box-shadow: none !important;
    border: 0 !important;
  }
}

.signature-consent {
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.45;
  display: flex;
}

.signature-consent input {
  margin-top: 3px;
}

.qr-display-panel {
  align-content: center;
  justify-items: center;
  gap: 8px;
  min-height: 430px;
  padding: 26px 16px;
  display: grid;
}

.qr-canvas {
  background: #fff;
  border-radius: 12px;
  max-width: 100%;
  width: min(360px, 78vw) !important;
  height: auto !important;
}

.qr-canvas-error {
  display: none;
}

.qr-countdown {
  text-align: center;
  margin: 8px 0 0;
  font-size: 16px;
}

.qr-status, .qr-meta {
  text-align: center;
  margin: 0;
}

.qr-error {
  text-align: center;
  background: #fff4f4;
  border: 1px solid #efb1b1;
  border-radius: 12px;
  max-width: 520px;
  padding: 18px;
}

.qr-error p {
  margin: 8px 0 12px;
}

.module-access-legend {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
  display: grid;
}

.module-access-legend > div {
  background: #fafbfc;
  border: 1px solid #e3e7eb;
  border-radius: 10px;
  gap: 4px;
  padding: 10px 12px;
  display: grid;
}

.module-access-legend span {
  color: #6b7280;
  font-size: 12px;
}

.module-access-note {
  background: #f6f8fa;
  border-radius: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .module-access-legend {
    grid-template-columns: 1fr;
  }
}

.form-error {
  color: #8f1d1d;
  background: #fff1f1;
  border: 1px solid #f3b4b4;
  border-radius: 10px;
  margin: 10px 0 14px;
  padding: 12px 14px;
}

.form-success {
  color: #21643a;
  background: #effaf3;
  border: 1px solid #b9dfc7;
  border-radius: 10px;
  margin: 10px 0 14px;
  padding: 12px 14px;
}

.mobile-app {
  --u-bg: #f5f6f8;
  --u-surface: #fff;
  --u-text: #17191c;
  --u-muted: #7a828c;
  --u-border: #e7eaee;
  --u-primary: #111827;
  --u-radius: 18px;
  --u-shadow: 0 2px 8px #11182709;
}

.mobile-app[data-theme="YOUTH_PASTEL"] {
  --u-bg: #fbfaff;
  --u-surface: #ffffffeb;
  --u-text: #292640;
  --u-muted: #7d7895;
  --u-border: #ece7f8;
  --u-primary: #7165e8;
  --u-radius: 22px;
  --u-shadow: 0 10px 32px #6858b414;
  color: var(--u-text);
  background: radial-gradient(circle at 84% 6%, #ddd6feb8, #0000 24%), radial-gradient(circle at 12% 16%, #fce7f3b3, #0000 21%), #fbfaff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header {
  background: #ffffffd6;
  border-color: #eee9f7;
  box-shadow: 0 8px 28px #5b4b960e;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header strong {
  color: #51498b;
  font-weight: 900;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header span {
  color: #8d86a8;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header .actions a {
  color: #6e61d8;
  background: #fff;
  border: 1px solid #ece6fa;
  box-shadow: 0 4px 14px #705ec414;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-content {
  background: none;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-card, .mobile-app[data-theme="YOUTH_PASTEL"] .m-list {
  background: var(--u-surface);
  border-color: var(--u-border);
  border-radius: var(--u-radius);
  box-shadow: var(--u-shadow);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-list > a, .mobile-app[data-theme="YOUTH_PASTEL"] .m-list > div {
  border-color: #f0ecf8;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-list > a:hover {
  background: #faf8ff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-primary {
  background: linear-gradient(135deg, #7868ee, #a777eb);
  border-radius: 16px;
  box-shadow: 0 8px 20px #705cdc33;
}

.mobile-app[data-theme="YOUTH_PASTEL"] input, .mobile-app[data-theme="YOUTH_PASTEL"] select, .mobile-app[data-theme="YOUTH_PASTEL"] textarea {
  background: #fffdfa;
  border-color: #e6e0f3;
  border-radius: 14px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-avatar {
  background: linear-gradient(145deg, #7768ea, #f09bc4);
  border-radius: 50%;
  box-shadow: 0 8px 24px #8263d338;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-avatar-img {
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 8px 24px #8263d329;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom a:hover {
  color: #6f61df;
  background: #f8f5ff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom b {
  font-size: 20px;
  line-height: 1;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom span {
  font-weight: 700;
}

.m-section-title {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  display: flex;
}

.m-section-title h2 {
  margin: 0;
}

.m-section-title a {
  color: #7467d8;
  font-size: 12px;
  font-weight: 700;
}

.youth-hero {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  display: flex;
}

.youth-sun {
  display: none;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-hero {
  min-height: 132px;
  box-shadow: var(--u-shadow);
  background: linear-gradient(125deg, #fffffff0, #eff6ffe6);
  border: 1px solid #eae5f5;
  border-radius: 24px;
  margin: 0 0 6px;
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-hero:after {
  content: "";
  opacity: .72;
  background: linear-gradient(130deg, #c7f3d7, #9be6c0);
  border-radius: 50% 50% 0 0;
  width: 210px;
  height: 125px;
  position: absolute;
  bottom: -48px;
  right: -38px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-hero h1 {
  color: #28243d;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-sun {
  z-index: 2;
  color: #f3bd35;
  background: #fff7ba;
  border-radius: 50%;
  place-items: center;
  width: 62px;
  height: 62px;
  font-size: 38px;
  display: grid;
  position: relative;
  box-shadow: 0 8px 24px #f4be342e;
}

.m-app-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.m-app-tile {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 17px;
  align-items: center;
  gap: 11px;
  padding: 13px;
  display: flex;
}

.m-app-icon {
  background: #f3f4f6;
  border-radius: 14px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 20px;
  font-weight: 900;
  display: grid;
}

.m-app-tile > span:last-child {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.m-app-tile strong {
  font-size: 13px;
}

.m-app-tile small {
  color: #7c8490;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  overflow: hidden;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-grid {
  gap: 12px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile {
  background: #ffffffe0;
  border-color: #ece7f7;
  border-radius: 19px;
  transition: transform .16s, box-shadow .16s;
  box-shadow: 0 6px 19px #55468f0d;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 26px #55468f1a;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-icon {
  border-radius: 15px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .metric-card:first-child {
  background: linear-gradient(145deg, #fff, #f1fff8);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .metric-card:nth-child(2) {
  background: linear-gradient(145deg, #fff, #f5f1ff);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .metric-card:nth-child(3) {
  background: linear-gradient(145deg, #fff, #fff8ed);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .metric-card:nth-child(4) {
  background: linear-gradient(145deg, #fff, #fff0f6);
}

.theme-option-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.theme-option {
  cursor: pointer;
  background: #fff;
  border: 2px solid #eceef1;
  border-radius: 18px;
  padding: 13px;
  position: relative;
  gap: 5px !important;
  display: grid !important;
}

.theme-option input {
  width: auto;
  position: absolute;
  top: 12px;
  right: 12px;
}

.theme-option:has(input:checked) {
  border-color: #8b7ae6;
  box-shadow: 0 0 0 3px #8b7ae61a;
}

.theme-option small {
  color: #7c8490;
  font-size: 11px;
}

.theme-swatch {
  align-items: center;
  gap: 5px;
  height: 34px;
  display: flex;
}

.theme-swatch i {
  border-radius: 8px;
  width: 24px;
  height: 24px;
  display: block;
}

.classic-preview .theme-swatch i:first-child {
  background: #17191c;
}

.classic-preview .theme-swatch i:nth-child(2) {
  background: #f5f6f8;
}

.classic-preview .theme-swatch i:nth-child(3) {
  background: #fff;
  border: 1px solid #ddd;
}

.youth-preview .theme-swatch i:first-child {
  background: #dcd3ff;
}

.youth-preview .theme-swatch i:nth-child(2) {
  background: #d9f5e6;
}

.youth-preview .theme-swatch i:nth-child(3) {
  background: #ffe1ee;
}

.m-theme-picker {
  margin-bottom: 14px;
}

.m-theme-picker > div > p {
  color: #7a828c;
  margin: 4px 0 14px;
  font-size: 12px;
}

.m-theme-success {
  color: #34734b;
  background: #f0fbf4;
  border: 1px solid #d7efdf;
  border-radius: 14px;
  margin-bottom: 12px;
  padding: 11px 13px;
  font-size: 13px;
}

@media (min-width: 900px) {
  .mobile-app[data-theme="YOUTH_PASTEL"] {
    max-width: 1440px;
    box-shadow: none;
    border-radius: 0;
    grid-template-rows: 76px minmax(calc(100vh - 76px), auto);
    grid-template-columns: 210px minmax(0, 1fr);
    margin: 0 auto;
    padding-bottom: 0;
    display: grid;
    overflow: visible;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-header {
    border-left: 1px solid #f0ecf8;
    grid-area: 1 / 2;
    height: 76px;
    padding: 14px 28px;
    position: sticky;
    top: 0;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-content {
    grid-area: 2 / 2;
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: 24px 30px 42px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom {
    width: 210px;
    height: 100vh;
    box-shadow: none;
    background: #ffffffd1;
    border: 0;
    border-right: 1px solid #eee9f7;
    border-radius: 0;
    flex-direction: column;
    grid-area: 1 / 1 / 3;
    justify-content: flex-start;
    gap: 8px;
    padding: 28px 16px;
    display: flex;
    position: sticky;
    top: 0;
    bottom: auto;
    left: auto;
    transform: none;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom:before {
    content: "♥  M-Corp";
    color: #6558c8;
    padding: 6px 12px 22px;
    font-size: 16px;
    font-weight: 900;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom a {
    border-radius: 14px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 13px;
    font-size: 17px;
    display: flex;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom span {
    font-size: 13px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile {
    min-height: 86px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-profile-head {
    text-align: left;
    grid-template-rows: auto auto;
    grid-template-columns: 88px 1fr;
    align-items: center;
    column-gap: 18px;
    display: grid;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-profile-head .m-avatar, .mobile-app[data-theme="YOUTH_PASTEL"] .m-profile-head .m-avatar-img {
    grid-row: 1 / 3;
    margin: 0;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-profile-head h1 {
    align-self: end;
    margin: 0;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-profile-head p {
    align-self: start;
  }
}

@media (max-width: 560px) {
  .theme-option-grid {
    grid-template-columns: 1fr;
  }

  .m-app-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-hero {
    padding: 18px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-sun {
    width: 50px;
    height: 50px;
    font-size: 30px;
  }
}

.mobile-app[data-theme="YOUTH_PASTEL"] {
  --y-purple: #6f63e8;
  --y-purple-2: #9c7bea;
  --y-pink: #f08bb9;
  --y-mint: #73d7ae;
  --y-peach: #f5b36b;
  --y-sky: #79b8ee;
  color: #2d2940;
  background: linear-gradient(145deg, #fbfaff 0%, #f7fbff 42%, #fffaf6 100%);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header {
  background: #ffffffe0;
  border-color: #eee9f8;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-brand-user {
  gap: 1px;
  position: relative;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-brand-user strong {
  color: #5f54bd;
  font-size: 16px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-theme-badge {
  color: #7a69d7;
  letter-spacing: .04em;
  background: #f0ebff;
  border-radius: 999px;
  width: max-content;
  margin-top: 3px;
  padding: 2px 7px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  display: inline-flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-content {
  padding-top: 20px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-dashboard {
  gap: 18px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome {
  background: linear-gradient(125deg, #fff 0%, #f5f1ff 53%, #eefaff 100%);
  border: 1px solid #e9e3f5;
  border-radius: 27px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 170px;
  padding: 24px 26px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 38px #5d4c9a14;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome:before {
  content: "";
  opacity: .75;
  background: #f9e7f2;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  position: absolute;
  top: -82px;
  right: -45px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome-copy {
  z-index: 2;
  max-width: 68%;
  position: relative;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-kicker {
  color: #a56e19;
  background: #fff4dc;
  border-radius: 999px;
  margin-bottom: 8px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome h1 {
  letter-spacing: -.04em;
  color: #28243d;
  margin: 0 0 8px;
  font-size: clamp(25px, 4vw, 38px);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome p {
  color: #6f6981;
  margin: 0 0 8px;
  font-size: 14px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome small {
  color: #9992aa;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene {
  z-index: 2;
  flex: 0 0 180px;
  width: 180px;
  height: 120px;
  position: relative;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene .youth-sun {
  color: #f5bd32;
  background: #fff3a8;
  border-radius: 50%;
  place-items: center;
  width: 60px;
  height: 60px;
  font-size: 34px;
  display: grid;
  position: absolute;
  top: 4px;
  right: 38px;
  box-shadow: 0 10px 25px #f1ba3233;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-cloud {
  color: #fff;
  text-shadow: 0 5px 15px #67719d17;
  font-size: 40px;
  position: absolute;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-cloud.c1 {
  top: 45px;
  left: 6px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-cloud.c2 {
  font-size: 30px;
  top: 64px;
  right: 0;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-hill {
  color: #5fc08c;
  letter-spacing: -10px;
  background: linear-gradient(120deg, #c4f0d2, #8fe0bd);
  border-radius: 55% 55% 0 0;
  height: 45px;
  padding: 8px 14px;
  font-size: 38px;
  position: absolute;
  bottom: -8px;
  left: 10px;
  right: 0;
  overflow: hidden;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel {
  background: #ffffffe6;
  border: 1px solid #ebe6f4;
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 10px 30px #57468b0f;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel-head {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  display: flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel-head small, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini small {
  color: #786bd3;
  letter-spacing: .07em;
  font-size: 10px;
  font-weight: 900;
  display: block;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel-head h2, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini h2 {
  color: #2e2a40;
  margin: 3px 0 0;
  font-size: 18px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel-head > a {
  color: #7665d9;
  font-size: 12px;
  font-weight: 800;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile {
  background: #fff;
  border: 1px solid #eee9f7;
  border-radius: 19px;
  align-items: center;
  gap: 12px;
  min-height: 82px;
  padding: 13px;
  display: flex;
  box-shadow: 0 7px 18px #5947930b;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile > span:last-child {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile strong {
  color: #312d43;
  font-size: 13px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile small {
  color: #8c859d;
  white-space: normal;
  font-size: 10px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-app-icon {
  border-radius: 15px;
  flex: 0 0 46px;
  place-items: center;
  width: 46px;
  height: 46px;
  font-size: 22px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .lavender .m-app-icon {
  color: #7665db;
  background: #eee9ff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .mint .m-app-icon {
  color: #43b982;
  background: #e1f8ed;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .peach .m-app-icon {
  color: #eb9b47;
  background: #fff0df;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .rose .m-app-icon {
  color: #db6b9d;
  background: #ffe5f0;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .sky .m-app-icon {
  color: #65a5e7;
  background: #e5f2ff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .blue .m-app-icon {
  color: #6382df;
  background: #e5ecff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .violet .m-app-icon {
  color: #906adf;
  background: #eee7ff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .yellow .m-app-icon {
  color: #dca83e;
  background: #fff5d8;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-columns {
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, .75fr);
  gap: 18px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-pill {
  color: #d66d9b;
  background: #fff0f5;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 800;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-today-grid {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status {
  min-height: 76px;
  color: inherit;
  background: #fff;
  border: 1px solid #f0ecf7;
  border-radius: 17px;
  align-items: center;
  gap: 11px;
  padding: 12px;
  display: flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status > span {
  color: #7667d8;
  background: #f4f1ff;
  border-radius: 13px;
  place-items: center;
  width: 39px;
  height: 39px;
  font-size: 18px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status.mint > span {
  color: #49b888;
  background: #e5f8ef;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status.peach > span {
  color: #df9546;
  background: #fff0df;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status.rose > span {
  color: #d96f9c;
  background: #ffe7f1;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status div {
  gap: 3px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status small {
  color: #8e879d;
  font-size: 10px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status strong {
  color: #343044;
  font-size: 12px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini {
  background: linear-gradient(145deg, #fff, #f5f0ff);
  align-items: center;
  gap: 15px;
  display: flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-avatar {
  color: #fff;
  background: linear-gradient(145deg, #8a78ef, #ef99bf);
  border: 5px solid #fff;
  border-radius: 50%;
  flex: 0 0 68px;
  place-items: center;
  width: 68px;
  height: 68px;
  font-size: 26px;
  font-weight: 900;
  display: grid;
  box-shadow: 0 9px 24px #755bc72e;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini p {
  color: #81798f;
  margin: 5px 0 9px;
  font-size: 11px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini a {
  color: #7463d8;
  font-size: 11px;
  font-weight: 800;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid > a {
  background: #fff;
  border: 1px solid #eee9f7;
  border-radius: 16px;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  font-size: 20px;
  display: flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid span {
  gap: 2px;
  display: grid;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid b {
  color: #342f46;
  font-size: 12px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid small {
  color: #938b9f;
  font-size: 9px;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom {
  background: #fffffff0;
  border-color: #ece7f7;
  box-shadow: 0 -8px 28px #5b4a9714;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom a {
  color: #817998;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom b {
  color: #6f61dc;
}

@media (min-width: 900px) {
  .mobile-app[data-theme="YOUTH_PASTEL"] {
    max-width: 1500px;
    box-shadow: none;
    grid-template-rows: 78px minmax(calc(100vh - 78px), auto);
    grid-template-columns: 220px minmax(0, 1fr);
    margin: 0 auto;
    padding-bottom: 0;
    display: grid;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-header {
    border-left: 1px solid #f0ecf8;
    grid-area: 1 / 2;
    height: 78px;
    padding: 14px 30px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-content {
    grid-area: 2 / 2;
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px 30px 48px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom {
    width: 220px;
    height: 100vh;
    box-shadow: none;
    background: #ffffffdb;
    border: 0;
    border-right: 1px solid #eee9f7;
    border-radius: 0;
    flex-direction: column;
    grid-area: 1 / 1 / 3;
    justify-content: flex-start;
    gap: 7px;
    padding: 28px 15px;
    display: flex;
    position: sticky;
    top: 0;
    bottom: auto;
    left: auto;
    transform: none;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom:before {
    content: "♥  M-Corp";
    color: #6558c8;
    padding: 5px 12px 22px;
    font-size: 16px;
    font-weight: 900;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom a {
    border-radius: 14px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 13px;
    font-size: 17px;
    display: flex;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom a:hover {
    color: #6658ca;
    background: #f3efff;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom span {
    font-size: 13px;
    font-weight: 700;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome {
    min-height: 145px;
    padding: 20px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome-copy {
    max-width: 78%;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene {
    flex-basis: 90px;
    width: 90px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene .youth-sun {
    width: 48px;
    height: 48px;
    font-size: 27px;
    right: 0;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-cloud, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-hill {
    display: none;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-columns {
    grid-template-columns: 1fr;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini {
    display: none;
  }
}

@media (max-width: 440px) {
  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-grid, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-today-grid, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile {
    gap: 9px;
    min-height: 74px;
    padding: 10px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-icon {
    flex-basis: 40px;
    width: 40px;
    height: 40px;
    font-size: 19px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile strong {
    font-size: 11px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile small {
    font-size: 8px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid > a {
    padding: 11px;
    font-size: 17px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid b {
    font-size: 10px;
  }
}

.mobile-app[data-theme="YOUTH_PASTEL"] {
  --y-primary: #7566df;
  --y-primary-2: #a478e8;
  --y-soft: #f0ecff;
  --y-soft-2: #fbf9ff;
  --y-ink: #51498b;
  --y-ring: #7566df2e;
}

.mobile-app[data-theme="YOUTH_PASTEL"][data-accent="PINK"] {
  --y-primary: #df6f9f;
  --y-primary-2: #f39aba;
  --y-soft: #ffe8f1;
  --y-soft-2: #fff8fb;
  --y-ink: #a64b73;
  --y-ring: #df6f9f2e;
}

.mobile-app[data-theme="YOUTH_PASTEL"][data-accent="MINT"] {
  --y-primary: #42b985;
  --y-primary-2: #79d6ae;
  --y-soft: #e4f9ef;
  --y-soft-2: #f7fefa;
  --y-ink: #2d8a64;
  --y-ring: #42b9852e;
}

.mobile-app[data-theme="YOUTH_PASTEL"][data-accent="SKY"] {
  --y-primary: #5c9fe6;
  --y-primary-2: #8bc5f2;
  --y-soft: #e7f3ff;
  --y-soft-2: #f8fcff;
  --y-ink: #3978bd;
  --y-ring: #5c9fe62e;
}

.mobile-app[data-theme="YOUTH_PASTEL"][data-accent="PEACH"] {
  --y-primary: #e9994b;
  --y-primary-2: #f5bf82;
  --y-soft: #fff0df;
  --y-soft-2: #fffaf4;
  --y-ink: #b56f2f;
  --y-ring: #e9994b2e;
}

.mobile-app[data-theme="YOUTH_PASTEL"] {
  --u-primary: var(--y-primary);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header strong, .mobile-app[data-theme="YOUTH_PASTEL"] .m-section-title a, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel-head small, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel-head > a, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini small, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini a, .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom b {
  color: var(--y-primary);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header .actions a {
  color: var(--y-primary);
  border-color: color-mix(in srgb,var(--y-primary) 18%,white);
  background: var(--y-soft-2);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-primary {
  background: linear-gradient(135deg,var(--y-primary),var(--y-primary-2));
  box-shadow: 0 8px 20px var(--y-ring);
  color: #fff;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-theme-badge {
  background: var(--y-soft);
  color: var(--y-ink);
  border-color: color-mix(in srgb,var(--y-primary) 20%,white);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel {
  border-color: color-mix(in srgb,var(--y-primary) 13%,#eee);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-panel-head h2, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini h2, .mobile-app[data-theme="YOUTH_PASTEL"] .m-app-tile strong, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-status strong, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-quick-grid b {
  color: var(--y-ink);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-avatar, .mobile-app[data-theme="YOUTH_PASTEL"] .m-avatar {
  background: linear-gradient(145deg,var(--y-primary),var(--y-primary-2));
  box-shadow: 0 9px 24px var(--y-ring);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-status > span {
  background: var(--y-soft);
  color: var(--y-primary);
}

.mobile-app[data-theme="YOUTH_PASTEL"] input:focus, .mobile-app[data-theme="YOUTH_PASTEL"] select:focus, .mobile-app[data-theme="YOUTH_PASTEL"] textarea:focus {
  outline: 2px solid var(--y-ring);
  border-color: var(--y-primary);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom a:hover {
  background: var(--y-soft);
  color: var(--y-primary);
}

@media (min-width: 900px) {
  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom:before {
    color: var(--y-primary);
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom a:hover {
    background: var(--y-soft);
    color: var(--y-primary);
  }
}

.accent-picker {
  border-top: 1px solid #eceef1;
  margin-top: 16px;
  padding-top: 14px;
}

.accent-picker > strong {
  font-size: 13px;
}

.accent-picker > p {
  color: #7c8490;
  margin: 4px 0 10px;
  font-size: 11px;
}

.accent-option-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.accent-option {
  cursor: pointer;
  background: #fff;
  border: 2px solid #eceef1;
  border-radius: 15px;
  justify-items: center;
  padding: 10px 6px;
  font-size: 10px;
  font-weight: 700;
  position: relative;
  gap: 6px !important;
  display: grid !important;
}

.accent-option input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.accent-option i {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: block;
  box-shadow: inset 0 0 0 4px #ffffffa6;
}

.accent-option:has(input:checked) {
  border-color: #a99de9;
  box-shadow: 0 0 0 3px #8b7ae617;
}

.accent-option.lavender i {
  background: #7566df;
}

.accent-option.pink i {
  background: #df6f9f;
}

.accent-option.mint i {
  background: #42b985;
}

.accent-option.sky i {
  background: #5c9fe6;
}

.accent-option.peach i {
  background: #e9994b;
}

@media (max-width: 480px) {
  .accent-option-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.accent-button-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  display: grid;
}

.accent-button-grid form {
  margin: 0;
}

.accent-button {
  color: #555;
  cursor: pointer;
  width: 100%;
  min-height: 74px;
  font: inherit;
  background: #fff;
  border: 2px solid #eceef1;
  border-radius: 16px;
  place-items: center;
  gap: 5px;
  padding: 9px 5px;
  display: grid;
  position: relative;
}

.accent-button i {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: block;
  box-shadow: inset 0 0 0 4px #ffffffad;
}

.accent-button span {
  font-size: 10px;
  font-weight: 800;
}

.accent-button b {
  font-size: 11px;
  position: absolute;
  top: 5px;
  right: 7px;
}

.accent-button.lavender i {
  background: #7566df;
}

.accent-button.pink i {
  background: #df6f9f;
}

.accent-button.mint i {
  background: #42b985;
}

.accent-button.sky i {
  background: #5c9fe6;
}

.accent-button.peach i {
  background: #e9994b;
}

.accent-button.lavender.active {
  color: #51498b;
  background: #f7f5ff;
  border-color: #7566df;
}

.accent-button.pink.active {
  color: #a64b73;
  background: #fff7fa;
  border-color: #df6f9f;
}

.accent-button.mint.active {
  color: #2d8a64;
  background: #f3fcf8;
  border-color: #42b985;
}

.accent-button.sky.active {
  color: #3978bd;
  background: #f4faff;
  border-color: #5c9fe6;
}

.accent-button.peach.active {
  color: #b56f2f;
  background: #fff8f1;
  border-color: #e9994b;
}

@media (max-width: 480px) {
  .accent-button-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome {
  border-color: color-mix(in srgb,var(--y-primary) 16%,white);
  background: linear-gradient(125deg,#fff 0%,var(--y-soft-2) 54%,color-mix(in srgb,var(--y-soft) 55%,#eefaff) 100%);
  box-shadow: 0 16px 38px var(--y-ring);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome:before {
  background: color-mix(in srgb,var(--y-primary-2) 18%,#fff);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome h1 {
  color: color-mix(in srgb,var(--y-ink) 82%,#242132);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-kicker, .mobile-app[data-theme="YOUTH_PASTEL"] .youth-pill {
  background: var(--y-soft);
  color: var(--y-ink);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-profile-mini {
  background: linear-gradient(145deg,#fff,var(--y-soft-2));
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom {
  border-color: color-mix(in srgb,var(--y-primary) 13%,white);
  box-shadow: 0 -8px 28px var(--y-ring);
}

@media (min-width: 900px) {
  .mobile-app[data-theme="YOUTH_PASTEL"] .m-bottom {
    border-right-color: color-mix(in srgb,var(--y-primary) 13%,white);
    background: color-mix(in srgb,var(--y-soft-2) 72%,white);
  }
}

.m-header-logout {
  margin: 0;
}

.m-header-logout button {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  color: var(--text, #111827);
  min-width: 36px;
  height: 36px;
  font: inherit;
  cursor: pointer;
  border-radius: 10px;
  padding: 0 10px;
  font-weight: 800;
}

.m-header-logout button:hover {
  filter: brightness(.98);
}

.m-logout-card {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.m-logout-card h2 {
  margin: 0 0 4px;
}

.m-logout-card p {
  color: var(--muted, #6b7280);
  margin: 0;
  font-size: 13px;
}

.m-logout-button {
  color: #b91c1c;
  font: inherit;
  cursor: pointer;
  background: #fff;
  border: 1px solid #ef4444;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 800;
}

.m-logout-button:hover {
  background: #fff1f2;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-header-logout button {
  border-color: var(--youth-border);
  background: var(--youth-soft);
  color: var(--youth-primary);
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-logout-card {
  border-color: color-mix(in srgb,var(--youth-primary) 22%,#fff);
  background: linear-gradient(135deg,#fff 0%,var(--youth-soft) 100%);
}

@media (max-width: 560px) {
  .m-logout-card {
    flex-direction: column;
    align-items: stretch;
  }

  .m-logout-button {
    width: 100%;
  }
}

.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

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

.stats-grid > div {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff);
  border-radius: 12px;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  display: flex;
}

@media (max-width: 760px) {
  .three-col {
    grid-template-columns: 1fr;
  }
}

.m-header .actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.m-approval-badge, .m-notification-badge {
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  min-width: 36px;
  height: 36px;
  text-decoration: none;
  display: inline-flex;
  position: relative;
}

.m-approval-badge span, .m-notification-badge span {
  color: #fff;
  text-align: center;
  background: #dc2626;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  position: absolute;
  top: -7px;
  right: -5px;
}

.m-approval-alert {
  margin: 10px 16px 0;
}

.m-approval-alert a {
  color: #9a3412;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  font-size: 13px;
  text-decoration: none;
  display: flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-approval-alert a, .mobile-app[data-theme="YOUTH_PASTEL"] .m-approval-badge {
  background: var(--youth-soft, #f5f3ff);
  border-color: var(--youth-border, #ddd6fe);
  color: var(--youth-primary, #7c3aed);
}

.m-actions.m-approval-actions {
  align-items: stretch;
  gap: 12px;
}

.m-actions.m-approval-actions form {
  flex-direction: column;
  justify-content: flex-end;
  display: flex;
}

.m-actions.m-approval-actions .m-primary {
  background: var(--youth-accent, #111827) !important;
  color: #fff !important;
  border-color: #0000 !important;
}

.m-actions.m-approval-actions .m-danger {
  color: #fff !important;
  background: #dc2626 !important;
  border-color: #dc2626 !important;
}

.m-actions.m-approval-actions .m-danger:hover {
  background: #b91c1c !important;
}

.m-reject-form input {
  min-height: 42px;
}

.m-email-state {
  color: #64748b;
  margin-top: 9px;
  display: block;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .m-email-state {
  color: var(--youth-accent-strong, #7c3aed);
}

@media (max-width: 640px) {
  .m-actions.m-approval-actions {
    grid-template-columns: 1fr;
    display: grid;
  }

  .m-actions.m-approval-actions form {
    width: 100%;
  }
}

.admin-theme-picker {
  max-width: 980px;
}

.admin-theme-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.admin-theme-option {
  cursor: pointer;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
  gap: 9px;
  padding: 18px;
  transition: all .18s;
  display: grid;
  position: relative;
}

.admin-theme-option:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px #0f172a14;
}

.admin-theme-option:has(input:checked) {
  border-color: #22b8b5;
  box-shadow: 0 0 0 4px #22b8b51a;
}

.admin-theme-option > input {
  width: auto;
  position: absolute;
  top: 16px;
  right: 16px;
}

.admin-theme-option strong {
  font-size: 18px;
}

.admin-theme-option small {
  color: #6b7280;
  line-height: 1.5;
}

.admin-theme-preview {
  background: #f7f8fa;
  border: 1px solid #dfe4e8;
  border-radius: 15px;
  grid-template-columns: 72px 1fr;
  height: 190px;
  display: grid;
  overflow: hidden;
}

.admin-theme-preview > i {
  display: block;
}

.admin-theme-preview > span {
  align-content: start;
  gap: 10px;
  padding: 22px 18px;
  display: grid;
}

.admin-theme-preview b {
  background: #fff;
  border: 1px solid #e4e7eb;
  border-radius: 7px;
  height: 24px;
  display: block;
}

.classic-admin-preview > i {
  background: #17191c;
}

.classic-admin-preview b:first-child {
  background: #f3f4f6;
  height: 34px;
}

.modern-admin-preview {
  background: #f6fbfb;
}

.modern-admin-preview > i {
  background: #fff;
  border-right: 1px solid #dce9e8;
}

.modern-admin-preview b {
  border-color: #d8e7e6;
  box-shadow: 0 3px 10px #127d7a0d;
}

.modern-admin-preview b:first-child {
  background: #dff5f3;
  border-color: #c8ece9;
  height: 34px;
}

.admin-theme-actions {
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  display: flex;
}

@media (max-width: 760px) {
  .admin-theme-grid {
    grid-template-columns: 1fr;
  }

  .admin-theme-preview {
    height: 145px;
  }
}

.shell[data-admin-theme="MODERN"] {
  --a-bg: #f5f8f9;
  --a-surface: #fff;
  --a-line: #dfe8ea;
  --a-soft: #e7f6f5;
  --a-soft2: #f4fbfa;
  --a-primary: #25b7b3;
  --a-primary-dark: #128b88;
  --a-ink: #152126;
  --a-muted: #708087;
  background: var(--a-bg);
  color: var(--a-ink);
  grid-template-columns: 260px minmax(0, 1fr);
}

.shell[data-admin-theme="MODERN"] .sidebar {
  color: var(--a-ink);
  border-right: 1px solid var(--a-line);
  background: #fff;
  padding: 22px 16px;
  box-shadow: 8px 0 28px #1f56580a;
}

.shell[data-admin-theme="MODERN"] .brand {
  color: #1b3135;
  align-items: center;
  gap: 11px;
  margin: 0 8px 22px;
  display: flex;
}

.shell[data-admin-theme="MODERN"] .brand > div {
  gap: 2px;
  display: grid;
}

.shell[data-admin-theme="MODERN"] .brand small {
  color: #839297;
  font-size: 10px;
  font-weight: 600;
  display: block;
}

.shell[data-admin-theme="MODERN"] .brand-mark {
  color: #fff;
  background: linear-gradient(145deg, #42c9c5, #18a7a4);
  border-radius: 13px;
  box-shadow: 0 7px 18px #25b7b33d;
}

.shell[data-admin-theme="MODERN"] .nav-grouped {
  scrollbar-color: #c7dddc transparent;
}

.shell[data-admin-theme="MODERN"] .nav-primary {
  border-bottom-color: #e8eeee;
}

.shell[data-admin-theme="MODERN"] .nav a {
  color: #314146;
  border: 1px solid #0000;
  font-weight: 600;
}

.shell[data-admin-theme="MODERN"] .nav a:hover {
  background: var(--a-soft2);
  color: var(--a-primary-dark);
  border-color: #d8efed;
}

.shell[data-admin-theme="MODERN"] .nav-group summary {
  color: #26383d;
  border: 1px solid #0000;
}

.shell[data-admin-theme="MODERN"] .nav-group summary:hover, .shell[data-admin-theme="MODERN"] .nav-group[open] > summary {
  background: var(--a-soft);
  color: #166d6b;
  border-color: #d6efed;
}

.shell[data-admin-theme="MODERN"] .nav-group-icon {
  color: #229995;
  background: #eef8f7;
  border: 1px solid #d8efed;
}

.shell[data-admin-theme="MODERN"] .nav-chevron {
  color: #7b9293;
}

.shell[data-admin-theme="MODERN"] .nav-group-items {
  padding-left: 38px;
}

.shell[data-admin-theme="MODERN"] .nav-group-items a {
  color: #53666b;
  border-left-color: #dce8e8;
}

.shell[data-admin-theme="MODERN"] .nav-group-items a:hover {
  border-left-color: var(--a-primary);
  color: #137b78;
  background: #f4fbfa;
}

.shell[data-admin-theme="MODERN"] .sidebar-footer {
  color: #708087;
  border-top-color: #e7eeee;
}

.shell[data-admin-theme="MODERN"] .sidebar-footer a {
  color: #31585b;
}

.shell[data-admin-theme="MODERN"] .workspace {
  background: linear-gradient(#fbfdfd 0, #f4f8f9 210px);
}

.shell[data-admin-theme="MODERN"] .topbar {
  border-bottom: 1px solid var(--a-line);
  background: #ffffffeb;
  height: 76px;
  padding: 14px 30px;
  box-shadow: 0 4px 18px #2d5c5e09;
}

.shell[data-admin-theme="MODERN"] .global-search {
  background: #fff;
  border: 1px solid #d9e5e6;
  border-radius: 12px;
  max-width: 600px;
  box-shadow: 0 3px 12px #22636509;
}

.shell[data-admin-theme="MODERN"] .global-search:focus-within {
  border-color: #8bd8d5;
  box-shadow: 0 0 0 3px #25b7b31a;
}

.shell[data-admin-theme="MODERN"] .global-search input {
  background: none;
}

.shell[data-admin-theme="MODERN"] .topbar-link {
  color: #486267;
  border-radius: 10px;
  padding: 8px 10px;
}

.shell[data-admin-theme="MODERN"] .topbar-link:hover {
  background: var(--a-soft);
  color: var(--a-primary-dark);
}

.shell[data-admin-theme="MODERN"] .content {
  padding: 30px 34px 46px;
}

.shell[data-admin-theme="MODERN"] .page-header {
  margin-bottom: 22px;
}

.shell[data-admin-theme="MODERN"] .page-header h1 {
  color: #183137;
  font-size: 27px;
}

.shell[data-admin-theme="MODERN"] .muted {
  color: var(--a-muted);
}

.shell[data-admin-theme="MODERN"] .card {
  border-color: var(--a-line);
  border-radius: 16px;
  box-shadow: 0 6px 22px #1f53550b;
}

.shell[data-admin-theme="MODERN"] .admin-module-card {
  transition: all .18s;
}

.shell[data-admin-theme="MODERN"] .admin-module-card:hover {
  border-color: #bfe3e1;
  transform: translateY(-2px);
  box-shadow: 0 13px 30px #1f666717;
}

.shell[data-admin-theme="MODERN"] .admin-module-card span {
  color: var(--a-primary-dark);
  font-weight: 700;
}

.shell[data-admin-theme="MODERN"] .table-wrap {
  border-color: var(--a-line);
  border-radius: 15px;
  box-shadow: 0 5px 18px #1f535509;
}

.shell[data-admin-theme="MODERN"] th {
  color: #607176;
  background: #f2f7f7;
  border-bottom-color: #dfe8e9;
}

.shell[data-admin-theme="MODERN"] td {
  border-bottom-color: #eaf0f0;
}

.shell[data-admin-theme="MODERN"] tbody tr:hover {
  background: #f8fcfc;
}

.shell[data-admin-theme="MODERN"] input, .shell[data-admin-theme="MODERN"] select, .shell[data-admin-theme="MODERN"] textarea {
  background: #fff;
  border-color: #d5e1e2;
  border-radius: 10px;
}

.shell[data-admin-theme="MODERN"] input:focus, .shell[data-admin-theme="MODERN"] select:focus, .shell[data-admin-theme="MODERN"] textarea:focus {
  border-color: #70cfcc;
  outline: none;
  box-shadow: 0 0 0 3px #25b7b31a;
}

.shell[data-admin-theme="MODERN"] .button {
  background: linear-gradient(135deg, #25b7b3, #179c99);
  border-radius: 10px;
  box-shadow: 0 6px 15px #25b7b32e;
}

.shell[data-admin-theme="MODERN"] .button:hover {
  filter: brightness(.98);
}

.shell[data-admin-theme="MODERN"] .button.secondary {
  color: #27585a;
  box-shadow: none;
  background: #fff;
  border-color: #cfe0e1;
}

.shell[data-admin-theme="MODERN"] .button.secondary:hover {
  background: #f1faf9;
  border-color: #a9d8d6;
}

.shell[data-admin-theme="MODERN"] .notice-success {
  color: #216e5c;
  background: #effbf8;
  border-color: #bce8dc;
}

.shell[data-admin-theme="MODERN"] .notice-error {
  background: #fff5f4;
}

.shell[data-admin-theme="MODERN"] .metric {
  color: #174f50;
}

.shell[data-admin-theme="MODERN"] details.edit-popover, .shell[data-admin-theme="MODERN"] .edit-popover {
  border-color: var(--a-line);
  border-radius: 14px;
  box-shadow: 0 15px 36px #184e501a;
}

@media (max-width: 800px) {
  .shell[data-admin-theme="MODERN"] {
    grid-template-columns: 1fr;
  }

  .shell[data-admin-theme="MODERN"] .content {
    padding: 20px;
  }

  .shell[data-admin-theme="MODERN"] .mobile-nav {
    background: #fff;
    border-bottom-color: #dce8e8;
  }

  .shell[data-admin-theme="MODERN"] .mobile-nav a {
    background: #f8fcfc;
    border-color: #d4e5e5;
  }
}

.money-input-wrap {
  width: 100%;
  display: block;
  position: relative;
}

.money-input-wrap > input[type="text"] {
  width: 100%;
  padding-right: 46px;
}

.money-input-currency {
  opacity: .55;
  pointer-events: none;
  font-size: 12px;
  font-weight: 700;
  position: absolute;
  top: 50%;
  right: 13px;
  transform: translateY(-50%);
}

.project-members-section {
  overflow: hidden;
}

.project-members-title {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 18px;
  display: flex;
}

.project-members-title h2 {
  margin-bottom: 4px;
}

.project-members-title p {
  margin: 0;
}

.project-member-list {
  border: 1px solid var(--border, #e5e7eb);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}

.project-member-head, .project-member-row {
  grid-template-columns: minmax(190px, .8fr) minmax(480px, 2fr) minmax(210px, .9fr) minmax(120px, .55fr) minmax(170px, .75fr) minmax(150px, .65fr);
  align-items: stretch;
  display: grid;
}

.project-member-list.without-cost .project-member-head, .project-member-list.without-cost .project-member-row {
  grid-template-columns: minmax(190px, .85fr) minmax(520px, 2.2fr) minmax(220px, 1fr) minmax(130px, .6fr) minmax(150px, .7fr);
}

.project-member-head {
  border-bottom: 1px solid var(--border, #e5e7eb);
  letter-spacing: .035em;
  text-transform: uppercase;
  color: #64748b;
  background: #f7f9fa;
  font-size: 11px;
  font-weight: 800;
}

.project-member-head > span {
  padding: 13px 16px;
}

.project-member-row {
  border-bottom: 1px solid #edf1f2;
  min-height: 220px;
}

.project-member-row:last-child {
  border-bottom: 0;
}

.project-member-row > div {
  border-right: 1px solid #edf1f2;
  padding: 18px 16px;
}

.project-member-row > div:last-child {
  border-right: 0;
}

.project-member-person {
  align-items: center;
  gap: 13px;
  display: flex;
}

.project-member-person > div:last-child {
  gap: 4px;
  display: grid;
}

.project-member-person small {
  display: block;
}

.project-member-avatar {
  color: #1d4ed8;
  letter-spacing: .02em;
  background: #e7efff;
  border-radius: 50%;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  font-size: 16px;
  font-weight: 800;
  display: grid;
}

.project-member-editor {
  align-items: center;
  display: flex;
}

.project-member-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 14px;
  width: 100%;
  display: grid;
}

.project-member-form label {
  color: #64748b;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  display: grid;
}

.project-member-form input, .project-member-form select {
  min-height: 42px;
}

.project-member-form .project-member-cost-input {
  grid-column: 1 / -1;
}

.project-member-readonly {
  align-content: center;
  gap: 7px;
  display: grid;
}

.project-member-summary {
  align-content: center;
  gap: 8px;
  display: grid;
}

.project-member-summary small {
  color: #64748b;
}

.project-member-summary strong {
  font-size: 14px;
  line-height: 1.45;
}

.project-member-actions {
  align-content: center;
  gap: 10px;
  display: grid;
}

.project-member-actions form {
  margin: 0;
}

.project-member-actions .button {
  justify-content: center;
  width: 100%;
}

.button.danger-outline {
  color: #c2412d;
  box-shadow: none;
  background: #fff;
  border: 1px solid #f08a72;
}

.button.danger-outline:hover {
  background: #fff7f5;
  border-color: #ea6548;
}

.empty-state {
  text-align: center;
  color: #64748b;
  background: #fafcfc;
  border: 1px dashed #d7e0e2;
  border-radius: 14px;
  padding: 30px;
}

.shell[data-admin-theme="MODERN"] .project-member-list {
  border-color: #dbe7e8;
  box-shadow: 0 7px 22px #1f535509;
}

.shell[data-admin-theme="MODERN"] .project-member-head {
  color: #5c7175;
  background: #f2f7f7;
}

.shell[data-admin-theme="MODERN"] .project-member-row > div {
  border-right-color: #e6eeee;
}

.shell[data-admin-theme="MODERN"] .project-member-row {
  border-bottom-color: #e8efef;
}

.shell[data-admin-theme="MODERN"] .project-member-avatar {
  color: #147d7a;
  background: #ddf5f3;
}

.shell[data-admin-theme="MODERN"] .button.danger-outline {
  color: #c44b36;
  background: #fff;
  border-color: #f0a08e;
}

.shell[data-admin-theme="MODERN"] .button.danger-outline:hover {
  background: #fff7f4;
}

@media (max-width: 1250px) {
  .project-member-head {
    display: none;
  }

  .project-member-list, .project-member-list.with-cost, .project-member-list.without-cost {
    background: none;
    border: 0;
    gap: 14px;
    display: grid;
    overflow: visible;
  }

  .project-member-row, .project-member-list.with-cost .project-member-row, .project-member-list.without-cost .project-member-row {
    border: 1px solid var(--border, #e5e7eb);
    background: #fff;
    border-radius: 14px;
    grid-template-columns: minmax(180px, .75fr) minmax(420px, 1.75fr) repeat(2, minmax(130px, .55fr));
    overflow: hidden;
  }

  .project-member-row > div {
    border-bottom: 1px solid #edf1f2;
  }

  .project-member-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    display: flex;
  }

  .project-member-actions .button {
    width: auto;
    min-width: 145px;
  }

  .project-member-list.with-cost .project-member-summary:nth-last-of-type(2), .project-member-row > .project-member-summary:nth-of-type(5) {
    grid-column: auto;
  }
}

@media (max-width: 850px) {
  .project-members-title {
    align-items: center;
  }

  .project-member-row, .project-member-list.with-cost .project-member-row, .project-member-list.without-cost .project-member-row {
    display: block;
  }

  .project-member-row > div {
    padding: 14px 16px;
    border-right: 0 !important;
  }

  .project-member-form {
    grid-template-columns: 1fr;
  }

  .project-member-form .project-member-cost-input {
    grid-column: auto;
  }

  .project-member-summary {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .project-member-summary strong {
    text-align: right;
  }

  .project-member-actions {
    display: grid;
  }

  .project-member-actions .button {
    width: 100%;
  }
}

.eyebrow {
  letter-spacing: .12em;
  color: #6b7f84;
  font-size: 10px;
  font-weight: 800;
  display: block;
}

.status-pill {
  letter-spacing: .04em;
  background: #eef3f4;
  border-radius: 999px;
  align-items: center;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.status-pill.ok {
  color: #18745d;
  background: #e9f8f2;
}

.muted-pill {
  color: #76858a;
  background: #f2f4f5;
}

.ok-text {
  color: #18745d;
}

.span-2 {
  grid-column: 1 / -1;
}

.workflow-dashboard {
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  display: grid;
}

.workflow-sidebar {
  padding: 0;
  position: sticky;
  top: 96px;
  overflow: hidden;
}

.workflow-sidebar-head {
  border-bottom: 1px solid #e8edef;
  justify-content: space-between;
  align-items: center;
  padding: 18px 18px 14px;
  display: flex;
}

.workflow-sidebar-head h2 {
  margin: 3px 0 0;
}

.workflow-list {
  max-height: 62vh;
  display: grid;
  overflow: auto;
}

.workflow-list-item {
  color: inherit;
  border-bottom: 1px solid #edf1f2;
  grid-template-columns: 1fr auto;
  gap: 6px 10px;
  padding: 14px 16px;
  text-decoration: none;
  display: grid;
}

.workflow-list-item > div:first-child {
  gap: 3px;
  display: grid;
}

.workflow-list-item small {
  color: #748287;
}

.workflow-list-item > small {
  grid-column: 1 / -1;
}

.workflow-list-item:hover, .workflow-list-item.active {
  background: #f3faf9;
}

.workflow-list-item.active {
  box-shadow: inset 3px 0 #23aaa6;
}

.workflow-list-meta {
  color: #66777c;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  display: flex;
}

.status-dot {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  display: inline-block;
}

.status-dot.on {
  background: #24aa75;
}

.status-dot.off {
  background: #a3adb1;
}

.workflow-create {
  padding: 14px 16px;
}

.workflow-create > summary {
  text-align: center;
  list-style: none;
}

.workflow-editor-panel {
  background: #fff;
  border: 1px solid #e1e8e9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 28px #1942460d;
}

.workflow-editor-title {
  background: linear-gradient(#fbfdfd, #f8fbfb);
  border-bottom: 1px solid #e8edef;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  display: flex;
}

.workflow-editor-title h2 {
  margin: 4px 0;
}

.workflow-editor-title p {
  color: #76858a;
  margin: 0;
}

.workflow-core-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 22px 24px;
  display: grid;
}

.workflow-core-form label {
  gap: 6px;
  display: grid;
}

.workflow-steps-head {
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px 10px;
  display: flex;
}

.workflow-steps-head h3 {
  margin: 3px 0;
}

.workflow-step-list {
  gap: 14px;
  padding: 0 24px 22px;
  display: grid;
}

.workflow-step-card {
  background: #fbfcfc;
  border: 1px solid #e4eaec;
  border-radius: 15px;
  grid-template-columns: 46px minmax(0, 1fr) 140px;
  gap: 16px;
  padding: 18px;
  display: grid;
}

.workflow-step-number {
  color: #187f7b;
  background: #e4f5f3;
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-weight: 900;
  display: grid;
}

.workflow-step-content {
  gap: 12px;
  display: grid;
}

.workflow-step-content > label {
  gap: 6px;
  display: grid;
}

.workflow-step-action {
  align-items: flex-end;
  display: flex;
}

.workflow-step-action .button {
  width: 100%;
}

.workflow-approver-box {
  gap: 12px;
  display: grid;
}

.workflow-resolve-preview {
  background: #f7fafb;
  border: 1px solid #dfe8e9;
  border-radius: 12px;
  padding: 12px 14px;
}

.workflow-resolve-preview p {
  color: #718187;
  margin: 5px 0 0;
  font-size: 12px;
}

.workflow-new-step {
  background: #fbfdfd;
  border: 1px dashed #cbdadd;
  border-radius: 15px;
  margin: 0 24px 24px;
  padding: 18px;
}

.workflow-toggle-row {
  justify-content: flex-end;
  margin-top: 12px;
  display: flex;
}

.forms-admin-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  align-items: start;
  gap: 22px;
  display: grid;
}

.form-template-create {
  padding: 22px;
}

.form-builder {
  gap: 12px;
  display: grid;
}

.form-builder-head {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.form-builder-head p {
  margin: 3px 0 0;
}

.form-builder-list {
  gap: 10px;
  display: grid;
}

.form-builder-row {
  background: #fbfcfc;
  border: 1px solid #e4eaec;
  border-radius: 12px;
  grid-template-columns: 32px minmax(150px, 1fr) 150px 110px minmax(180px, 1fr) auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  display: grid;
}

.form-builder-row label {
  gap: 5px;
  display: grid;
}

.form-builder-index {
  color: #167d79;
  background: #e8f5f4;
  border-radius: 8px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-weight: 800;
  display: grid;
}

.form-builder-required {
  align-items: center;
  padding-bottom: 10px;
  gap: 6px !important;
  display: flex !important;
}

.form-builder-required input {
  width: auto;
}

.form-builder-wide {
  min-width: 0;
}

.form-template-list {
  gap: 12px;
  display: grid;
}

.form-template-card {
  border: 1px solid #e4eaec;
  border-radius: 13px;
  justify-content: space-between;
  gap: 16px;
  padding: 15px;
  display: flex;
}

.form-template-card h3 {
  margin: 8px 0 4px;
}

.form-template-card p {
  color: #718187;
  margin: 0 0 7px;
}

.form-template-card > div:last-child {
  align-content: start;
  justify-items: end;
  gap: 10px;
  display: grid;
}

.shell[data-admin-theme="MODERN"] .workflow-editor-panel, .shell[data-admin-theme="MODERN"] .workflow-sidebar {
  border-color: #dbe8e8;
}

.shell[data-admin-theme="MODERN"] .workflow-step-card, .shell[data-admin-theme="MODERN"] .form-builder-row {
  background: #fbfefe;
  border-color: #dce8e8;
}

.shell[data-admin-theme="MODERN"] .workflow-list-item.active {
  background: #eaf8f6;
}

.shell[data-admin-theme="MODERN"] .workflow-step-number, .shell[data-admin-theme="MODERN"] .form-builder-index {
  color: #137b78;
  background: #ddf5f3;
}

@media (max-width: 1100px) {
  .workflow-dashboard, .forms-admin-layout {
    grid-template-columns: 1fr;
  }

  .workflow-sidebar {
    position: static;
  }

  .workflow-list {
    max-height: none;
  }

  .workflow-step-card {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .workflow-step-action {
    grid-column: 2;
  }

  .form-builder-row {
    grid-template-columns: 32px 1fr 150px;
  }

  .form-builder-wide {
    grid-column: 2 / -1;
  }
}

@media (max-width: 700px) {
  .workflow-core-form {
    grid-template-columns: 1fr;
  }

  .span-2 {
    grid-column: auto;
  }

  .workflow-step-card {
    display: block;
  }

  .workflow-step-number {
    margin-bottom: 10px;
  }

  .workflow-step-action {
    margin-top: 12px;
  }

  .form-builder-row {
    display: block;
  }

  .form-builder-row > * {
    margin-bottom: 9px;
  }

  .form-builder-required {
    padding-bottom: 0;
  }

  .workflow-editor-title {
    padding: 18px;
  }

  .workflow-core-form, .workflow-step-list {
    padding-left: 18px;
    padding-right: 18px;
  }

  .workflow-new-step {
    margin-left: 18px;
    margin-right: 18px;
  }
}

.m-form-details {
  background: #f7f8fa;
  border-radius: 10px;
  gap: 6px;
  margin: 10px 0;
  padding: 10px 12px;
  display: grid;
}

.m-form-details > div {
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
  display: flex;
}

.m-form-details span {
  color: #718096;
  text-transform: capitalize;
}

.m-form-details b {
  text-align: right;
}

.forms-catalog-layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
}

.form-catalog-panel {
  padding: 22px;
}

.page-header.compact {
  align-items: center;
  margin: 0 0 14px;
}

.page-header.compact h2 {
  margin: 2px 0;
}

.form-template-catalog-card {
  background: linear-gradient(#fff, #fbfdfd);
  align-items: center;
}

.form-template-card-top {
  align-items: center;
  gap: 8px;
  display: flex;
}

.status-badge {
  color: #66767b;
  background: #eef1f2;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 800;
}

.status-badge.active {
  color: #167a55;
  background: #e5f7ef;
}

.form-template-meta {
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
  display: flex;
}

.form-template-meta span {
  color: #66777c;
  background: #f3f6f7;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
}

.form-detail-layout {
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  align-items: start;
  gap: 22px;
  display: grid;
}

.form-detail-side {
  gap: 16px;
  padding: 22px;
  display: grid;
  position: sticky;
  top: 96px;
}

.summary-grid.single {
  grid-template-columns: 1fr;
  gap: 10px;
  display: grid;
}

.summary-grid.single > div {
  background: #f7fafb;
  border: 1px solid #e5ecee;
  border-radius: 10px;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 12px;
  display: flex;
}

.summary-grid.single span {
  color: #708086;
}

.header-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.text-link {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.alert.success {
  color: #166534;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.m-card.alert p {
  margin: 5px 0 0;
}

@media (max-width: 1100px) {
  .forms-catalog-layout, .form-detail-layout {
    grid-template-columns: 1fr;
  }

  .form-detail-side {
    position: static;
  }

  .header-actions {
    flex-wrap: wrap;
  }
}

.project-create-card {
  padding: 0;
  overflow: hidden;
}

.project-create-heading {
  background: linear-gradient(#fff, #fbfcfc);
  border-bottom: 1px solid #e8edef;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 24px 26px 20px;
  display: flex;
}

.project-create-heading h2 {
  letter-spacing: -.01em;
  margin: 5px 0 7px;
  font-size: 21px;
}

.project-create-heading p {
  max-width: 780px;
  margin: 0;
  line-height: 1.55;
}

.project-create-kicker {
  color: #267b78;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #eef7f6;
  border-radius: 999px;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.project-create-step {
  color: #65777b;
  background: #fff;
  border: 1px solid #dfe8e9;
  border-radius: 999px;
  flex: none;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
}

.project-create-form {
  grid-template-columns: minmax(0, 1.75fr) minmax(280px, .72fr);
  align-items: stretch;
  display: grid;
}

.project-create-main {
  gap: 0;
  padding: 4px 28px 26px;
  display: grid;
}

.project-form-section {
  border: 0;
  border-bottom: 1px solid #edf1f2;
  min-width: 0;
  margin: 0;
  padding: 24px 0;
}

.project-form-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.project-form-section legend {
  color: #26383c;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
}

.project-form-section legend > span {
  color: #238985;
  background: #edf7f6;
  border-radius: 10px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 11px;
  font-weight: 900;
  display: grid;
}

.project-form-section legend > div {
  gap: 2px;
  display: grid;
}

.project-form-section legend strong {
  font-size: 14px;
}

.project-form-section legend small {
  color: #7a898d;
  font-size: 11px;
  font-weight: 500;
}

.project-form-grid {
  grid-template-columns: 1fr;
  gap: 14px;
  display: grid;
}

.project-form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-form-grid label {
  color: #52656a;
  gap: 7px;
  font-size: 12px;
  font-weight: 750;
  display: grid;
}

.project-form-grid input, .project-form-grid select, .project-form-grid textarea {
  background: #fcfdfd;
  border-color: #dbe4e6;
  border-radius: 10px;
  min-height: 42px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.project-form-grid textarea {
  resize: vertical;
  min-height: 82px;
}

.project-form-grid input:focus, .project-form-grid select:focus, .project-form-grid textarea:focus {
  background: #fff;
  border-color: #55bcb8;
  outline: 0;
  box-shadow: 0 0 0 3px #25b7b31c;
}

.project-form-grid input::placeholder, .project-form-grid textarea::placeholder {
  color: #a7b1b4;
}

.project-form-grid .money-input-wrap {
  display: block;
  position: relative;
}

.project-form-grid .money-input-wrap input {
  padding-right: 38px;
}

.project-create-side {
  background: #f8fbfb;
  border-left: 1px solid #e8edef;
  flex-direction: column;
  gap: 18px;
  padding: 26px;
  display: flex;
}

.project-create-summary {
  border-bottom: 1px solid #e2ebec;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 18px;
  display: flex;
}

.project-create-summary-icon {
  color: #fff;
  background: linear-gradient(135deg, #27b6b1, #168f8c);
  border-radius: 12px;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  font-weight: 900;
  display: grid;
  box-shadow: 0 7px 16px #25b7b32e;
}

.project-create-summary > div {
  gap: 4px;
  display: grid;
}

.project-create-summary strong {
  color: #27484b;
  font-size: 14px;
}

.project-create-summary small {
  color: #738489;
  line-height: 1.45;
}

.project-create-notes {
  gap: 15px;
  display: grid;
}

.project-create-notes > div {
  grid-template-columns: 24px 1fr;
  align-items: start;
  gap: 10px;
  display: grid;
}

.project-create-notes > div > span {
  color: #247e7b;
  background: #e7f3f2;
  border-radius: 8px;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 10px;
  font-weight: 900;
  display: grid;
}

.project-create-notes p {
  gap: 3px;
  margin: 0;
  display: grid;
}

.project-create-notes strong {
  color: #42595e;
  font-size: 12px;
}

.project-create-notes small {
  color: #7a898d;
  line-height: 1.45;
}

.project-create-toggle {
  cursor: pointer;
  background: #fff;
  border: 1px solid #dbe7e8;
  border-radius: 12px;
  grid-template-columns: auto 1fr;
  align-items: start;
  margin-top: auto;
  padding: 14px;
  gap: 10px !important;
  font-weight: 400 !important;
  display: grid !important;
}

.project-create-toggle input {
  accent-color: #1da7a3;
  width: auto;
  margin-top: 3px;
}

.project-create-toggle > span {
  gap: 3px;
  display: grid;
}

.project-create-toggle strong {
  color: #365156;
  font-size: 12px;
}

.project-create-toggle small {
  color: #7c8b8f;
  line-height: 1.4;
}

.project-create-submit {
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding-inline: 16px;
}

.project-create-submit > span {
  font-size: 18px;
  line-height: 1;
}

.project-create-footnote {
  text-align: center;
  color: #8a979a;
  line-height: 1.4;
}

.shell[data-admin-theme="MODERN"] .project-create-card {
  border-color: #dce9ea;
  box-shadow: 0 9px 30px #1f53550e;
}

.shell[data-admin-theme="MODERN"] .project-create-heading {
  background: linear-gradient(#fff, #f8fcfb);
  border-bottom-color: #dfe9ea;
}

.shell[data-admin-theme="MODERN"] .project-create-side {
  background: linear-gradient(#f5fbfa, #f8fbfb);
  border-left-color: #dfe9ea;
}

@media (max-width: 1100px) {
  .project-create-form {
    grid-template-columns: 1fr;
  }

  .project-create-side {
    border-top: 1px solid #e8edef;
    border-left: 0;
  }

  .project-create-notes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .project-create-toggle {
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  .project-create-heading {
    padding: 20px;
    display: grid;
  }

  .project-create-step {
    justify-self: start;
  }

  .project-create-main, .project-create-side {
    padding: 20px;
  }

  .project-form-grid.two, .project-create-notes {
    grid-template-columns: 1fr;
  }

  .project-form-section {
    padding: 20px 0;
  }
}

.payroll-settings-card {
  padding: 0;
  overflow: hidden;
}

.payroll-settings-hero {
  background: linear-gradient(#fff, #fbfdfd);
  border-bottom: 1px solid #e7eef0;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  padding: 24px 26px 20px;
  display: flex;
}

.payroll-settings-kicker {
  color: #267b78;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #eef7f6;
  border-radius: 999px;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.payroll-settings-hero h2 {
  letter-spacing: -.01em;
  margin: 8px 0 7px;
  font-size: 21px;
}

.payroll-settings-hero p {
  max-width: 860px;
  margin: 0;
  line-height: 1.58;
}

.payroll-settings-hero-metrics {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
  min-width: min(460px, 45%);
  display: grid;
}

.payroll-settings-hero-metrics > div {
  background: #fff;
  border: 1px solid #e0ebec;
  border-radius: 14px;
  gap: 4px;
  padding: 14px 15px;
  display: grid;
  box-shadow: 0 4px 14px #205b5e0a;
}

.payroll-settings-hero-metrics small {
  color: #7b8a8e;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
}

.payroll-settings-hero-metrics strong {
  color: #214449;
  font-size: 15px;
}

.payroll-settings-layout {
  grid-template-columns: minmax(0, 1.7fr) minmax(290px, .78fr);
  align-items: start;
  display: grid;
}

.payroll-settings-main {
  padding: 8px 28px 26px;
}

.payroll-settings-section {
  border: 0;
  border-bottom: 1px solid #edf1f2;
  min-width: 0;
  margin: 0;
  padding: 24px 0;
}

.payroll-settings-section:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.payroll-settings-section legend {
  color: #26383c;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
}

.payroll-settings-section legend > span {
  color: #238985;
  background: #edf7f6;
  border-radius: 10px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 11px;
  font-weight: 900;
  display: grid;
}

.payroll-settings-section legend > div {
  gap: 2px;
  display: grid;
}

.payroll-settings-section legend strong {
  font-size: 14px;
}

.payroll-settings-section legend small {
  color: #7a898d;
  font-size: 11px;
  font-weight: 500;
}

.payroll-settings-grid {
  gap: 14px;
}

.payroll-settings-grid label {
  color: #52656a;
  gap: 7px;
  font-size: 12px;
  font-weight: 750;
  display: grid;
}

.payroll-settings-grid input, .payroll-settings-grid select, .payroll-settings-grid textarea {
  background: #fcfdfd;
  border-color: #dbe4e6;
  border-radius: 10px;
  min-height: 42px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.payroll-settings-grid input:focus, .payroll-settings-grid select:focus, .payroll-settings-grid textarea:focus {
  background: #fff;
  border-color: #55bcb8;
  outline: 0;
  box-shadow: 0 0 0 3px #25b7b31c;
}

.payroll-settings-grid .money-input-wrap {
  display: block;
  position: relative;
}

.payroll-settings-grid .money-input-wrap input {
  padding-right: 38px;
}

.payroll-settings-grid small {
  line-height: 1.45;
}

.payroll-settings-grid.compact-top {
  margin-top: 14px;
}

.payroll-settings-side {
  background: linear-gradient(#f6fbfb, #fafcfc);
  border-left: 1px solid #e7eef0;
  gap: 16px;
  padding: 26px;
  display: grid;
  position: sticky;
  top: 92px;
}

.payroll-settings-side-card {
  background: #fff;
  border: 1px solid #dce8e8;
  border-radius: 14px;
  gap: 10px;
  padding: 16px;
  display: grid;
  box-shadow: 0 4px 16px #225a5c0a;
}

.payroll-settings-side-card strong {
  color: #284a4f;
  font-size: 14px;
}

.payroll-settings-side-card p {
  margin: 0;
  line-height: 1.56;
}

.payroll-settings-bullets {
  gap: 10px;
  display: grid;
}

.payroll-settings-bullets > div {
  border-bottom: 1px dashed #e0e8ea;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  display: flex;
}

.payroll-settings-bullets > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.payroll-settings-bullets span {
  color: #708084;
  font-size: 12px;
}

.payroll-settings-bullets b {
  color: #24454a;
  text-align: right;
  font-size: 13px;
}

.payroll-settings-side-card ul {
  color: #738489;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  line-height: 1.45;
  display: grid;
}

.payroll-settings-submit {
  width: 100%;
  min-height: 46px;
}

.payroll-settings-footnote {
  text-align: center;
  color: #879599;
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.shell[data-admin-theme="MODERN"] .payroll-settings-card {
  border-color: #dce9ea;
  box-shadow: 0 9px 30px #1f53550e;
}

.shell[data-admin-theme="MODERN"] .payroll-settings-hero {
  background: linear-gradient(#fff, #f8fcfb);
  border-bottom-color: #dfe9ea;
}

.shell[data-admin-theme="MODERN"] .payroll-settings-side {
  background: linear-gradient(#f5fbfa, #f8fbfb);
  border-left-color: #dfe9ea;
}

@media (max-width: 1180px) {
  .payroll-settings-hero {
    display: grid;
  }

  .payroll-settings-hero-metrics {
    min-width: 0;
  }

  .payroll-settings-layout {
    grid-template-columns: 1fr;
  }

  .payroll-settings-side {
    border-top: 1px solid #e7eef0;
    border-left: 0;
    position: static;
  }
}

@media (max-width: 760px) {
  .payroll-settings-hero, .payroll-settings-main, .payroll-settings-side {
    padding: 20px;
  }

  .payroll-settings-hero-metrics {
    grid-template-columns: 1fr;
  }

  .payroll-settings-section {
    padding: 20px 0;
  }
}

.payroll-period-create {
  gap: 14px;
  display: grid;
}

.payroll-period-heading {
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  display: flex;
}

.payroll-period-heading h2, .payroll-period-list-head h2 {
  margin: 6px 0 5px;
  font-size: 20px;
}

.payroll-period-heading p, .payroll-period-list-head p {
  margin: 0;
}

.payroll-period-grid {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 16px;
  display: grid;
}

.payroll-period-card {
  border-color: #e2ebec;
  gap: 16px;
  padding: 22px;
  display: grid;
}

.payroll-period-card.featured {
  background: linear-gradient(#fff, #f8fcfb);
}

.payroll-period-card-head {
  align-items: flex-start;
  gap: 11px;
  display: flex;
}

.payroll-period-card-head > span {
  color: #238985;
  background: #edf7f6;
  border-radius: 10px;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 11px;
  font-weight: 900;
  display: grid;
}

.payroll-period-card-head > div {
  gap: 3px;
  display: grid;
}

.payroll-period-card-head strong {
  color: #2a454a;
  font-size: 15px;
}

.payroll-period-card-head small {
  color: #7a898d;
}

.payroll-period-card .form-grid {
  max-width: none;
}

.payroll-custom-period-form {
  gap: 14px;
}

.payroll-period-list {
  gap: 14px;
  display: grid;
}

.payroll-period-list-head {
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  display: flex;
}

.payroll-period-summary {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 10px;
  min-width: min(470px, 46%);
  display: grid;
}

.payroll-period-summary > div {
  background: #fff;
  border: 1px solid #e0e9eb;
  border-radius: 13px;
  gap: 3px;
  padding: 13px 14px;
  display: grid;
}

.payroll-period-summary small {
  color: #7b8a8e;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
}

.payroll-period-summary strong {
  color: #24464b;
  font-size: 14px;
}

.payroll-period-table {
  border-radius: 15px;
  box-shadow: 0 6px 20px #1f53550a;
}

.payroll-period-table th {
  color: #6b7d81;
  background: #f8fbfb;
}

.payroll-period-table tbody tr:hover {
  background: #fbfefe;
}

.payroll-period-name {
  gap: 3px;
  display: grid;
}

.payroll-period-name small {
  color: #839095;
  font-size: 11px;
  display: none;
}

.payroll-net-value {
  color: #147f78;
}

.payroll-status {
  color: #617176;
  letter-spacing: .03em;
  background: #eef2f3;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  min-width: 86px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.payroll-status.draft {
  color: #9a6a13;
  background: #fff7e8;
}

.payroll-status.calculated {
  color: #246b9b;
  background: #eaf6ff;
}

.payroll-status.approved, .payroll-status.paid {
  color: #1c7a52;
  background: #e8f7ef;
}

.payroll-status.cancelled, .payroll-status.void {
  color: #a24646;
  background: #fff0f0;
}

.payroll-period-actions {
  min-width: max-content;
}

.shell[data-admin-theme="MODERN"] .payroll-period-card, .shell[data-admin-theme="MODERN"] .payroll-period-table, .shell[data-admin-theme="MODERN"] .payroll-period-summary > div {
  border-color: #dce8e9;
}

@media (max-width: 1100px) {
  .payroll-period-grid {
    grid-template-columns: 1fr;
  }

  .payroll-period-list-head {
    display: grid;
  }

  .payroll-period-summary {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .payroll-period-summary {
    grid-template-columns: 1fr;
  }

  .payroll-period-card {
    padding: 18px;
  }

  .payroll-period-table td:nth-child(2), .payroll-period-table th:nth-child(2) {
    display: none;
  }

  .payroll-period-name small {
    display: block;
  }
}

.learning-admin-page-header {
  align-items: flex-end;
}

.learning-admin-kicker {
  color: #267b78;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #eef7f6;
  border-radius: 999px;
  align-items: center;
  min-height: 24px;
  margin-bottom: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.learning-admin-header-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.learning-admin-hero {
  background: linear-gradient(#fff, #f9fcfc);
  border: 1px solid #dfe9ea;
  gap: 18px;
  padding: 24px 26px;
  display: grid;
}

.learning-admin-hero h2 {
  letter-spacing: -.02em;
  color: #163339;
  margin: 0 0 8px;
  font-size: 24px;
}

.learning-admin-hero-copy p {
  max-width: 920px;
  margin: 0;
  line-height: 1.58;
}

.learning-admin-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.learning-stat-card {
  background: #fff;
  border: 1px solid #dce8e8;
  border-radius: 16px;
  gap: 5px;
  padding: 16px 17px;
  display: grid;
  box-shadow: 0 4px 16px #225a5c0a;
}

.learning-stat-card small {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #7b8a8e;
  font-size: 11px;
}

.learning-stat-card strong {
  color: #204348;
  font-size: 27px;
  line-height: 1;
}

.learning-stat-card span {
  color: #75868a;
  font-size: 12px;
}

.learning-admin-layout {
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr);
  align-items: start;
  gap: 18px;
  display: grid;
}

.learning-admin-form-card {
  padding: 0;
  overflow: hidden;
}

.learning-section-head {
  background: linear-gradient(#fff, #fbfdfd);
  border-bottom: 1px solid #e8eff0;
  padding: 24px 26px 18px;
}

.learning-section-head h2 {
  letter-spacing: -.02em;
  margin: 8px 0 6px;
  font-size: 22px;
}

.learning-section-head p {
  max-width: 850px;
  margin: 0;
  line-height: 1.55;
}

.learning-section-badge {
  color: #248985;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #eef7f6;
  border-radius: 999px;
  align-items: center;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.learning-admin-form {
  gap: 0;
  padding: 0 26px 26px;
  display: grid;
}

.learning-form-section {
  border: 0;
  border-bottom: 1px solid #edf1f2;
  margin: 0;
  padding: 24px 0;
}

.learning-form-section:last-of-type {
  border-bottom: 0;
  padding-bottom: 20px;
}

.learning-form-section legend {
  color: #26383c;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
}

.learning-form-section legend > span {
  color: #238985;
  background: #edf7f6;
  border-radius: 10px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 11px;
  font-weight: 900;
  display: grid;
}

.learning-form-section legend > div {
  gap: 2px;
  display: grid;
}

.learning-form-section legend strong {
  font-size: 14px;
}

.learning-form-section legend small {
  color: #7a898d;
  font-size: 11px;
  font-weight: 500;
}

.learning-form-grid {
  gap: 14px;
}

.learning-form-grid label {
  color: #52656a;
  gap: 7px;
  font-size: 12px;
  font-weight: 750;
  display: grid;
}

.learning-form-grid input, .learning-form-grid select, .learning-form-grid textarea {
  background: #fcfdfd;
  border-color: #dbe4e6;
  border-radius: 10px;
  min-height: 42px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.learning-form-grid textarea {
  resize: vertical;
  min-height: 88px;
}

.learning-form-grid input:focus, .learning-form-grid select:focus, .learning-form-grid textarea:focus {
  background: #fff;
  border-color: #55bcb8;
  outline: 0;
  box-shadow: 0 0 0 3px #25b7b31c;
}

.learning-form-grid .learning-multi-select {
  min-height: 132px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.learning-form-grid small {
  line-height: 1.45;
}

.learning-form-grid.single-row {
  display: grid;
}

.learning-form-actions {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
  display: flex;
}

.learning-form-actions .button {
  min-width: 180px;
}

.learning-admin-sidebar {
  gap: 16px;
  display: grid;
  position: sticky;
  top: 92px;
}

.learning-side-card {
  background: linear-gradient(#fff, #fbfdfd);
  border-color: #dfe9ea;
  padding: 18px 18px 16px;
}

.learning-side-card h3 {
  margin: 0 0 14px;
  font-size: 18px;
}

.learning-guideline-list {
  gap: 12px;
  display: grid;
}

.learning-guideline-item {
  border-bottom: 1px dashed #e4ebec;
  padding: 12px 0;
}

.learning-guideline-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.learning-guideline-item strong {
  color: #24464a;
  margin-bottom: 4px;
  display: block;
}

.learning-guideline-item p {
  margin: 0;
  line-height: 1.5;
}

.learning-bullet-list {
  color: #6f8186;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  line-height: 1.5;
  display: grid;
}

.learning-side-summary {
  gap: 10px;
  display: grid;
}

.learning-side-summary > div {
  border-bottom: 1px dashed #e2e9ea;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  display: flex;
}

.learning-side-summary > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.learning-side-summary span {
  color: #708084;
  font-size: 12px;
}

.learning-side-summary b {
  color: #25464b;
  font-size: 14px;
}

.learning-list-header h2 {
  margin: 0 0 4px;
}

.learning-inline-metrics {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.learning-inline-metrics span {
  color: #496469;
  background: #f2f7f7;
  border: 1px solid #dde8e9;
  border-radius: 999px;
  align-items: center;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.learning-table-wrap {
  border-radius: 16px;
  overflow: hidden;
}

.learning-program-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.learning-program-table thead th {
  white-space: nowrap;
}

.learning-program-table tbody td {
  vertical-align: top;
  padding-top: 16px;
  padding-bottom: 16px;
}

.learning-program-table tbody tr:hover {
  background: #fbfdfd;
}

.learning-primary-cell {
  gap: 4px;
  min-width: 240px;
  display: grid;
}

.learning-primary-cell strong {
  color: #1f3d42;
  font-size: 14px;
}

.learning-primary-cell span {
  color: #7f8f93;
  font-size: 12px;
  font-weight: 700;
}

.learning-primary-cell p {
  color: #6d7f84;
  max-width: 420px;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.learning-pill {
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 8px 11px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  display: inline-flex;
}

.learning-pill-neutral {
  color: #4e676c;
  background: #f4f6f7;
  border: 1px solid #e1e7e9;
}

.learning-pill-soft {
  color: #2a726f;
  background: #edf7f6;
  border: 1px solid #d6eae8;
}

.learning-status-pill.status-draft {
  color: #8a5d00;
  background: #fff5db;
  border: 1px solid #f6deb0;
}

.learning-status-pill.status-published {
  color: #1f7a43;
  background: #e9f9ef;
  border: 1px solid #cdeed7;
}

.learning-status-pill.status-archived {
  color: #647078;
  background: #f1f3f5;
  border: 1px solid #e0e5e8;
}

.learning-progress-cell {
  gap: 6px;
  min-width: 150px;
  display: grid;
}

.learning-progress-cell strong {
  color: #24454a;
  font-size: 14px;
}

.learning-progress-cell span {
  color: #728387;
  font-size: 12px;
}

.learning-progress-bar {
  background: #ebf1f1;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.learning-progress-bar i {
  background: linear-gradient(90deg, #25b7b3, #67cfc9);
  border-radius: 999px;
  height: 100%;
  display: block;
}

.learning-empty-state {
  text-align: center;
  gap: 6px;
  padding: 30px 10px;
  display: grid;
}

.learning-empty-state strong {
  color: #27474c;
  font-size: 16px;
}

.learning-empty-state p {
  margin: 0;
}

.shell[data-admin-theme="MODERN"] .learning-admin-hero, .shell[data-admin-theme="MODERN"] .learning-side-card, .shell[data-admin-theme="MODERN"] .learning-admin-form-card {
  border-color: #dce9ea;
  box-shadow: 0 9px 30px #1f53550e;
}

.shell[data-admin-theme="MODERN"] .learning-inline-metrics span {
  color: #376065;
  background: #f3fbfa;
  border-color: #d2e8e7;
}

@media (max-width: 1180px) {
  .learning-admin-layout {
    grid-template-columns: 1fr;
  }

  .learning-admin-sidebar {
    position: static;
  }

  .learning-admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .learning-admin-hero, .learning-section-head, .learning-admin-form {
    padding-left: 18px;
    padding-right: 18px;
  }

  .learning-admin-hero {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .learning-admin-stats {
    grid-template-columns: 1fr;
  }

  .learning-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .learning-scope-grid {
    grid-template-columns: 1fr;
  }

  .learning-inline-metrics {
    justify-content: flex-start;
  }
}

.workspace-kicker {
  color: #267b78;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #eef7f6;
  border-radius: 999px;
  align-items: center;
  min-height: 24px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.workspace-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.workspace-stat-card {
  background: #fff;
  border: 1px solid #dce8e8;
  border-radius: 16px;
  gap: 5px;
  min-width: 0;
  padding: 17px 18px;
  display: grid;
  box-shadow: 0 4px 16px #225a5c0a;
}

.workspace-stat-card > span {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #7b8a8e;
  font-size: 11px;
  font-weight: 700;
}

.workspace-stat-card > strong {
  color: #204348;
  letter-spacing: -.03em;
  font-size: 28px;
  line-height: 1.05;
}

.workspace-stat-card > small {
  color: #75868a;
  font-size: 12px;
  line-height: 1.4;
}

.workspace-section-head {
  background: linear-gradient(#fff, #fbfdfd);
  border-bottom: 1px solid #e8eff0;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px 18px;
  display: flex;
}

.workspace-section-head.compact-head {
  background: none;
  padding: 0 0 16px;
}

.workspace-section-head h2 {
  letter-spacing: -.015em;
  color: #203d42;
  margin: 7px 0 5px;
  font-size: 20px;
}

.workspace-section-head p {
  margin: 0;
  line-height: 1.5;
}

.workspace-head-badge, .workspace-count-badge {
  color: #557075;
  background: #f7fbfb;
  border: 1px solid #dbe8e8;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  font-size: 12px;
  display: inline-flex;
}

.workspace-count-badge {
  color: #2f6d6c;
  background: #edf8f7;
  font-weight: 800;
}

.workspace-form {
  gap: 0;
  display: grid;
}

.workspace-form-section {
  border: 0;
  border-bottom: 1px solid #edf1f2;
  min-width: 0;
  margin: 0;
  padding: 22px 0;
}

.workspace-form-section:last-of-type {
  border-bottom: 0;
}

.workspace-form-section legend {
  color: #26383c;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
}

.workspace-form-section legend > span {
  color: #238985;
  background: #edf7f6;
  border-radius: 10px;
  place-items: center;
  width: 32px;
  height: 32px;
  font-size: 11px;
  font-weight: 900;
  display: grid;
}

.workspace-form-section legend > div {
  gap: 2px;
  display: grid;
}

.workspace-form-section legend strong {
  font-size: 14px;
}

.workspace-form-section legend small {
  color: #7a898d;
  font-size: 11px;
  font-weight: 500;
}

.workspace-form-grid {
  gap: 14px;
  display: grid;
}

.workspace-form-grid label, .workspace-form-grid.single-row {
  color: #52656a;
  gap: 7px;
  font-size: 12px;
  font-weight: 750;
  display: grid;
}

.workspace-form-grid input, .workspace-form-grid select, .workspace-form-grid textarea {
  background: #fcfdfd;
  border-color: #dbe4e6;
  border-radius: 10px;
  min-height: 42px;
}

.workspace-form-grid textarea {
  resize: vertical;
  min-height: 88px;
}

.workspace-form-grid small {
  line-height: 1.45;
}

.workspace-form-grid.compact-top {
  margin-top: 14px;
}

.workspace-form-actions {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0 0;
  display: flex;
}

.workspace-details-list {
  gap: 12px;
  display: grid;
}

.workspace-details-card {
  background: #fff;
  border: 1px solid #dfe9ea;
  border-radius: 14px;
  overflow: hidden;
}

.workspace-details-card > summary {
  cursor: pointer;
  background: #fbfdfd;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  list-style: none;
  display: flex;
}

.workspace-details-card > summary::-webkit-details-marker {
  display: none;
}

.workspace-details-card > summary > div {
  gap: 3px;
  display: grid;
}

.workspace-details-card > summary span {
  color: #738489;
  font-size: 12px;
}

.workspace-details-body {
  border-top: 1px solid #e7eeee;
  padding: 18px;
}

.workspace-empty-state {
  text-align: center;
  justify-items: center;
  gap: 5px;
  padding: 30px 18px;
  display: grid;
}

.workspace-empty-state strong {
  color: #29494d;
  font-size: 15px;
}

.workspace-empty-state p {
  margin: 0;
}

.status-chip {
  white-space: nowrap;
  color: #5c6f74;
  background: #f4f6f7;
  border: 1px solid #e0e6e8;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.status-chip.success {
  color: #237747;
  background: #eaf8ef;
  border-color: #ccebd6;
}

.status-chip.warning {
  color: #8a6208;
  background: #fff6df;
  border-color: #f1dfb9;
}

.status-chip.danger {
  color: #a23b3b;
  background: #fff0f0;
  border-color: #f3d1d1;
}

.status-chip.info {
  color: #2f6f8d;
  background: #eaf6fb;
  border-color: #cfe7f1;
}

.table-primary-cell {
  white-space: normal;
  gap: 4px;
  max-width: 420px;
  display: grid;
}

.table-primary-cell strong {
  color: #213f44;
}

.table-primary-cell span {
  color: #738489;
  font-size: 12px;
  line-height: 1.4;
}

.table-details summary {
  cursor: pointer;
  color: #277c79;
  font-size: 12px;
  font-weight: 800;
}

.table-details > div {
  white-space: normal;
  min-width: 320px;
  padding: 12px 0;
  line-height: 1.5;
}

.shell[data-admin-theme="MODERN"] .content {
  background: linear-gradient(#f6faf9 0, #f5f8f8 220px, #f6f8f9 100%);
}

.shell[data-admin-theme="MODERN"] .content > .page-header, .shell[data-admin-theme="MODERN"] .content > div > .page-header {
  padding: 2px 2px 0;
}

.shell[data-admin-theme="MODERN"] .page-header h1 {
  letter-spacing: -.025em;
  font-weight: 800;
}

.shell[data-admin-theme="MODERN"] .page-header p {
  margin: 6px 0 0;
  line-height: 1.5;
}

.shell[data-admin-theme="MODERN"] .card {
  background: linear-gradient(#fff, #fdfefe);
  border-color: #dce7e8;
  border-radius: 16px;
  box-shadow: 0 7px 24px #1f53550b;
}

.shell[data-admin-theme="MODERN"] .card > h2:first-child, .shell[data-admin-theme="MODERN"] .card > h3:first-child {
  color: #203d42;
  letter-spacing: -.01em;
}

.shell[data-admin-theme="MODERN"] .form-grid {
  gap: 14px;
  max-width: none;
}

.shell[data-admin-theme="MODERN"] .form-grid label {
  color: #52656a;
  font-size: 12px;
  font-weight: 750;
}

.shell[data-admin-theme="MODERN"] .form-grid input, .shell[data-admin-theme="MODERN"] .form-grid select, .shell[data-admin-theme="MODERN"] .form-grid textarea {
  background: #fcfdfd;
  border-color: #dbe4e6;
  border-radius: 10px;
  min-height: 42px;
}

.shell[data-admin-theme="MODERN"] .form-grid textarea {
  resize: vertical;
  min-height: 82px;
}

.shell[data-admin-theme="MODERN"] .form-grid input:focus, .shell[data-admin-theme="MODERN"] .form-grid select:focus, .shell[data-admin-theme="MODERN"] .form-grid textarea:focus {
  background: #fff;
  border-color: #55bcb8;
  box-shadow: 0 0 0 3px #25b7b31a;
}

.shell[data-admin-theme="MODERN"] .table-wrap {
  background: #fff;
  border-color: #dce7e8;
  border-radius: 16px;
  box-shadow: 0 5px 18px #1f535509;
}

.shell[data-admin-theme="MODERN"] table th {
  color: #60757a;
  background: #f6faf9;
  border-bottom-color: #dfe9ea;
  font-size: 11px;
  font-weight: 800;
}

.shell[data-admin-theme="MODERN"] table td {
  border-bottom-color: #edf2f2;
}

.shell[data-admin-theme="MODERN"] table tbody tr {
  transition: background .12s;
}

.shell[data-admin-theme="MODERN"] table tbody tr:hover {
  background: #fbfdfd;
}

.shell[data-admin-theme="MODERN"] .module-card {
  transition: transform .16s, box-shadow .16s, border-color .16s;
}

.shell[data-admin-theme="MODERN"] .module-card:hover {
  border-color: #c3dddd;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px #1f535514;
}

.shell[data-admin-theme="MODERN"] .list-row {
  border-bottom-color: #e8eeee;
}

.shell[data-admin-theme="MODERN"] details.list-row {
  background: #fff;
  border: 1px solid #dfe8e9;
  border-radius: 13px;
  margin-bottom: 10px;
  padding: 0;
  display: block;
  overflow: hidden;
}

.shell[data-admin-theme="MODERN"] details.list-row > summary {
  cursor: pointer;
  color: #2e4b50;
  background: #fbfdfd;
  padding: 14px 15px;
  list-style: none;
}

.shell[data-admin-theme="MODERN"] details.list-row > summary::-webkit-details-marker {
  display: none;
}

.shell[data-admin-theme="MODERN"] details.list-row > [class*="section-gap"], .shell[data-admin-theme="MODERN"] details.list-row > form {
  padding-left: 16px;
  padding-right: 16px;
}

.shell[data-admin-theme="MODERN"] .button {
  border-radius: 10px;
  min-height: 38px;
  transition: transform .12s, box-shadow .12s, background .12s;
}

.shell[data-admin-theme="MODERN"] .button:hover {
  transform: translateY(-1px);
}

.shell[data-admin-theme="MODERN"] .form-error, .shell[data-admin-theme="MODERN"] .m-error, .shell[data-admin-theme="MODERN"] .form-success {
  border-radius: 12px;
}

.recruitment-page {
  display: block;
}

.recruitment-page-header {
  align-items: flex-end;
}

.recruitment-page-header .workspace-kicker {
  margin-bottom: 8px;
}

.recruitment-hero {
  background: linear-gradient(135deg, #fff 0, #f5fbfa 100%);
  padding: 24px 26px;
  position: relative;
  overflow: hidden;
}

.recruitment-hero:after {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, #2fb9b11f, #2fb9b100 70%);
  border-radius: 50%;
  width: 260px;
  height: 260px;
  position: absolute;
  top: -110px;
  right: -80px;
}

.recruitment-hero-copy {
  z-index: 1;
  max-width: 920px;
  position: relative;
}

.recruitment-hero-eyebrow {
  color: #2d7d79;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
}

.recruitment-hero h2 {
  letter-spacing: -.02em;
  color: #18383d;
  margin: 0 0 8px;
  font-size: 24px;
}

.recruitment-hero p {
  margin: 0;
  line-height: 1.6;
}

.recruitment-flow-strip {
  z-index: 1;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  display: flex;
  position: relative;
}

.recruitment-flow-strip span {
  color: #396368;
  background: #fff;
  border: 1px solid #d8e8e7;
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 750;
}

.recruitment-flow-strip i {
  color: #91aaa9;
  font-style: normal;
}

.recruitment-module-heading {
  align-items: flex-end;
}

.recruitment-module-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.recruitment-module-card {
  gap: 18px;
  min-height: 220px;
  transition: transform .16s, box-shadow .16s, border-color .16s;
  display: grid;
  padding: 20px !important;
}

.recruitment-module-card:hover {
  transform: translateY(-3px);
  border-color: #bbdcda !important;
  box-shadow: 0 14px 34px #1f535517 !important;
}

.recruitment-module-top {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.recruitment-module-step {
  color: #237f7b;
  background: #eaf7f5;
  border-radius: 12px;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 12px;
  font-weight: 900;
  display: grid;
}

.recruitment-module-badge {
  color: #687b7f;
  background: #f4f7f7;
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 750;
}

.recruitment-module-card h2 {
  font-size: 19px;
  margin: 0 0 8px !important;
}

.recruitment-module-card p {
  color: #6f8085;
  margin: 0;
  line-height: 1.55;
}

.recruitment-module-action {
  color: #247c79;
  border-top: 1px solid #e8eeee;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  display: flex;
}

.recruitment-module-action span {
  font-size: 19px;
}

.recruitment-principle-card {
  grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr);
  align-items: start;
  gap: 24px;
  padding: 22px 24px;
  display: grid;
}

.recruitment-principle-card h2 {
  margin: 7px 0 0;
}

.recruitment-principle-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.recruitment-principle-grid > div {
  background: #fbfdfd;
  border: 1px solid #e0e9ea;
  border-radius: 12px;
  gap: 4px;
  padding: 13px 14px;
  display: grid;
}

.recruitment-principle-grid b {
  color: #2b5055;
}

.recruitment-principle-grid span {
  color: #738489;
  font-size: 12px;
  line-height: 1.45;
}

.recruitment-subpage > .workspace-stat-grid {
  margin-bottom: 0;
}

.recruitment-form-shell {
  padding: 0;
  overflow: hidden;
}

.recruitment-form-shell > .form-error, .recruitment-form-shell > .form-success {
  margin: 18px 24px 0;
}

.recruitment-request-form {
  padding: 0 24px 24px;
}

.recruitment-inbox-card, .recruitment-history-card, .recruitment-subpage > .card:not(.recruitment-form-shell):not(.recruitment-inbox-card):not(.recruitment-history-card) {
  padding: 22px 24px;
}

.recruitment-subpage .card > .form-grid {
  margin-top: 12px;
}

.recruitment-subpage .card > .two-col .card {
  height: 100%;
}

.recruitment-subpage .table-wrap {
  margin-top: 10px;
}

.recruitment-subpage .list-row {
  white-space: normal;
}

.recruitment-subpage details.list-row > summary {
  font-weight: 650;
}

.recruitment-subpage details.list-row .form-grid {
  max-width: none;
}

.recruitment-forms-page > .section-gap > .card {
  padding: 22px 24px;
}

.recruitment-forms-page > .section-gap > .card > .page-header {
  margin-bottom: 14px;
}

.recruitment-interviews-page .form-inline select {
  min-width: 280px;
}

.recruitment-hr-page > .two-col {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 18px;
}

.recruitment-hr-page > .two-col > .card {
  padding: 22px 24px;
}

@media (max-width: 1180px) {
  .workspace-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .recruitment-principle-card, .recruitment-hr-page > .two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .workspace-section-head {
    display: grid;
  }

  .workspace-form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .recruitment-module-grid, .recruitment-principle-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .workspace-stat-grid {
    grid-template-columns: 1fr;
  }

  .recruitment-hero {
    padding: 20px;
  }

  .recruitment-flow-strip i {
    display: none;
  }

  .recruitment-request-form {
    padding-left: 18px;
    padding-right: 18px;
  }

  .recruitment-inbox-card, .recruitment-history-card {
    padding: 18px;
  }
}

:root {
  --admin-font-size: 11px;
}

html, body {
  font-family: var(--app-font);
  font-size: var(--admin-font-size);
  line-height: 1.45;
}

body, input, select, textarea, button, table, th, td, label, a, p, li, summary, small, code {
  font-family: var(--app-font);
}

.shell, input, select, textarea, button, label, table, th, td, p, li, summary, .muted, .form-inline, .form-grid, .list-row, .result-list, .sidebar-footer, .topbar-link, .nav a, .nav-group summary, .nav-group-items a, button, .button, .button.compact, .button.secondary, th, td, small, .auth-help, .result-list span, .table-primary-cell span, .workspace-stat-card span, .recruitment-principle-grid span, .nav a, .nav-group summary, .nav-group-items a, .topbar-link, .mobile-nav a, .auth-card label, .alert {
  font-size: var(--admin-font-size);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--app-font);
  line-height: 1.2;
}

h1, .page-header h1 {
  font-size: calc(var(--admin-font-size) + 13px);
}

h2 {
  font-size: calc(var(--admin-font-size) + 6px);
}

h3 {
  font-size: calc(var(--admin-font-size) + 3px);
}

h4 {
  font-size: calc(var(--admin-font-size) + 1px);
}

h5, h6 {
  font-size: var(--admin-font-size);
}

.metric, .workspace-stat-card strong, .learning-stat-card strong {
  font-size: calc(var(--admin-font-size) + 16px);
}

.workspace-kicker, .learning-admin-kicker, .learning-section-badge, .payroll-settings-kicker, .project-create-kicker, .recruitment-hero-eyebrow, .status-chip, .learning-pill, .learning-inline-metrics span, .recruitment-module-badge, .auth-badge, .m-status, .workspace-details-card > summary span, .learning-stat-card small, .payroll-settings-hero-metrics small, .project-form-section legend small, .payroll-settings-section legend small, .learning-form-section legend small {
  font-size: var(--admin-font-size);
}

.mobile-app, .mobile-app input, .mobile-app select, .mobile-app textarea, .mobile-app button, .mobile-app a, .mobile-app p, .mobile-app span, .mobile-app small, .mobile-app label, .mobile-app li {
  font-family: var(--app-font);
}

.mobile-app {
  font-size: 11px;
}

.m-header strong {
  font-size: 13px;
}

.m-header span, .m-header > a, .m-bottom span, .m-hero p, .m-hero span, .m-page-title p, .m-list > a, .m-list > div, .m-request p, .m-task p, .payslip-row, .profile-list b, .quiz-question label {
  font-size: 11px;
}

.print-report, .certificate, .public-verify {
  font-family: var(--app-font);
}

.print-report th, .print-report td {
  font-size: var(--admin-font-size);
}

.admin-font-size-card {
  gap: 20px;
  display: grid;
}

.admin-font-size-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  display: flex;
}

.admin-font-size-head h2 {
  margin: 7px 0 5px;
}

.admin-font-size-head p {
  max-width: 760px;
  margin: 0;
}

.admin-font-size-current {
  text-align: center;
  background: #f7fbfb;
  border: 1px solid #dce8e8;
  border-radius: 14px;
  gap: 3px;
  min-width: 96px;
  padding: 13px 15px;
  display: grid;
}

.admin-font-size-current small {
  color: #738589;
}

.admin-font-size-current strong {
  color: #24484d;
  font-size: 24px;
}

.admin-font-size-options {
  grid-template-columns: repeat(7, minmax(70px, 1fr));
  gap: 10px;
  display: grid;
}

.admin-font-size-option {
  cursor: pointer;
  background: #fff;
  border: 1px solid #dce5e7;
  border-radius: 14px;
  place-items: center;
  min-height: 82px;
  padding: 12px;
  transition: all .15s;
  gap: 6px !important;
  display: grid !important;
}

.admin-font-size-option:hover {
  background: #f8fcfc;
  border-color: #9bd5d2;
}

.admin-font-size-option.selected {
  background: #edf9f8;
  border-color: #42b8b3;
  box-shadow: 0 0 0 3px #25b7b317;
}

.admin-font-size-option input {
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  position: absolute;
}

.admin-font-size-option span {
  font-family: var(--app-font);
  color: #24464b;
  font-weight: 800;
}

.admin-font-size-option small {
  color: #7d8d91;
}

.admin-font-size-preview {
  font-family: var(--app-font);
  background: #fbfdfd;
  border: 1px dashed #c9dddd;
  border-radius: 14px;
  gap: 5px;
  padding: 18px;
  display: grid;
}

.admin-font-size-preview p, .admin-font-size-preview small {
  font-size: inherit;
  margin: 0;
}

.admin-font-size-preview small {
  opacity: .7;
}

@media (max-width: 820px) {
  .admin-font-size-options {
    grid-template-columns: repeat(4, 1fr);
  }

  .admin-font-size-head {
    display: grid;
  }

  .admin-font-size-current {
    justify-self: start;
  }
}

@media (max-width: 520px) {
  .admin-font-size-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lifecycle-v2-header {
  align-items: flex-end;
}

.lifecycle-v2-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.lifecycle-v2-stat {
  background: linear-gradient(#fff, #fbfdfd);
  gap: 5px;
  min-height: 112px;
  padding: 17px 18px;
  display: grid;
}

.lifecycle-v2-stat small {
  color: #708287;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}

.lifecycle-v2-stat strong {
  color: #1f4b50;
  font-size: 28px;
  line-height: 1;
}

.lifecycle-v2-stat span {
  color: #7a898d;
}

.lifecycle-v2-create {
  padding: 0;
  overflow: hidden;
}

.lifecycle-v2-create > .workspace-section-head {
  background: linear-gradient(#fff, #fafdfd);
  border-bottom: 1px solid #e6edef;
  padding: 22px 24px 18px;
}

.lifecycle-v2-create-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  display: grid;
}

.lifecycle-v2-create-panel {
  gap: 14px;
  padding: 24px;
  display: grid;
}

.lifecycle-v2-create-panel + .lifecycle-v2-create-panel {
  border-left: 1px solid #e6edef;
}

.lifecycle-v2-create-panel label {
  color: #4d6368;
  gap: 7px;
  font-weight: 700;
  display: grid;
}

.lifecycle-v2-create-panel input, .lifecycle-v2-create-panel select {
  background: #fcfefe;
  border-color: #d8e4e6;
  min-height: 44px;
}

.lifecycle-v2-panel-head {
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
  display: flex;
}

.lifecycle-v2-panel-head > span {
  color: #177b77;
  background: #dff5f2;
  border-radius: 13px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-weight: 900;
  display: grid;
}

.offboarding-panel .lifecycle-v2-panel-head > span {
  color: #b8513d;
  background: #fff0ed;
}

.lifecycle-v2-panel-head > div {
  gap: 3px;
  display: grid;
}

.lifecycle-v2-panel-head strong {
  color: #24474b;
  font-size: 15px;
}

.lifecycle-v2-panel-head small {
  color: #78898d;
}

.lifecycle-v2-note {
  color: #6d7e82;
  background: #f8fbfb;
  border: 1px solid #e2e9eb;
  border-radius: 10px;
  padding: 11px 12px;
  line-height: 1.45;
}

.lifecycle-v2-list {
  gap: 10px;
  display: grid;
}

.lifecycle-v2-row {
  grid-template-columns: auto minmax(230px, 1.3fr) auto 145px minmax(160px, .9fr) auto auto;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  display: grid;
}

.lifecycle-v2-row:hover {
  border-color: #cfe3e3;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px #1f535512;
}

.lifecycle-v2-avatar {
  color: #147973;
  background: #e3f6f3;
  border-radius: 14px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 15px;
  font-weight: 900;
  display: grid;
}

.lifecycle-v2-avatar.offboarding {
  color: #b64b35;
  background: #fff0ed;
}

.lifecycle-v2-person {
  gap: 4px;
  display: grid;
}

.lifecycle-v2-person strong {
  color: #233f44;
  font-size: 13px;
}

.lifecycle-v2-person span {
  color: #75868a;
}

.lifecycle-type-pill.onboarding {
  color: #1c7551;
  background: #e5f8ef;
  border: 1px solid #ccebdc;
}

.lifecycle-type-pill.offboarding {
  color: #a94a36;
  background: #fff0ec;
  border: 1px solid #f2d5cc;
}

.lifecycle-v2-date {
  gap: 4px;
  display: grid;
}

.lifecycle-v2-date small {
  color: #839094;
}

.lifecycle-v2-date strong {
  color: #344f54;
}

.lifecycle-v2-progress {
  gap: 7px;
  display: grid;
}

.lifecycle-v2-progress > div {
  justify-content: space-between;
  gap: 10px;
  display: flex;
}

.lifecycle-v2-progress > div span {
  color: #7d8d91;
}

.lifecycle-v2-progress > i {
  background: #e9eff0;
  border-radius: 999px;
  height: 7px;
  display: block;
  overflow: hidden;
}

.lifecycle-v2-progress > i > b {
  background: linear-gradient(90deg, #25b7b3, #69cec8);
  border-radius: 999px;
  height: 100%;
  display: block;
}

.lifecycle-status-pill.status-in_progress {
  color: #277875;
  background: #eaf7f6;
  border: 1px solid #d4eae8;
}

.lifecycle-status-pill.status-pending {
  color: #8a6200;
  background: #fff5d9;
  border: 1px solid #f1dfb2;
}

.lifecycle-status-pill.status-completed {
  color: #287746;
  background: #e9f8ee;
  border: 1px solid #d0e9d8;
}

.lifecycle-status-pill.status-cancelled {
  color: #69777b;
  background: #f1f3f4;
  border: 1px solid #e0e5e7;
}

.lifecycle-v2-open {
  color: #287a78;
  white-space: nowrap;
  font-weight: 800;
}

.lifecycle-v2-empty {
  text-align: center;
  gap: 6px;
  display: grid;
  padding: 34px !important;
}

.lifecycle-v2-empty p {
  margin: 0;
}

.lifecycle-detail-header {
  align-items: flex-end;
}

.lifecycle-back-link {
  color: #5d757a;
  margin-bottom: 9px;
  display: inline-flex;
}

.lifecycle-detail-overview {
  grid-template-columns: minmax(250px, 1.25fr) repeat(3, minmax(150px, .75fr));
  gap: 14px;
  display: grid;
}

.lifecycle-detail-profile {
  align-items: center;
  gap: 13px;
  display: flex;
}

.lifecycle-detail-profile > div:last-child {
  gap: 3px;
  display: grid;
}

.lifecycle-detail-profile small, .lifecycle-detail-metric small {
  color: #7a898d;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.lifecycle-detail-profile strong {
  color: #234349;
  font-size: 15px;
}

.lifecycle-detail-profile span {
  color: #738488;
}

.lifecycle-detail-metric {
  gap: 5px;
  display: grid;
}

.lifecycle-detail-metric strong {
  color: #23484d;
  font-size: 20px;
}

.lifecycle-detail-metric span {
  color: #77888c;
}

.lifecycle-detail-timeline {
  padding: 22px;
}

.lifecycle-department-groups {
  gap: 14px;
  margin-top: 16px;
  display: grid;
}

.lifecycle-department-card {
  background: #fff;
  border: 1px solid #dfe9ea;
  border-radius: 15px;
  overflow: hidden;
}

.lifecycle-department-head {
  background: #f8fbfb;
  border-bottom: 1px solid #e5edef;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 16px;
  display: flex;
}

.lifecycle-department-head > div:first-child {
  align-items: center;
  gap: 11px;
  display: flex;
}

.lifecycle-department-head > div:first-child > span {
  color: #287d79;
  background: #e4f5f3;
  border-radius: 9px;
  place-items: center;
  min-width: 38px;
  height: 32px;
  padding: 0 8px;
  font-weight: 900;
  display: grid;
}

.lifecycle-department-head > div:first-child > div {
  gap: 2px;
  display: grid;
}

.lifecycle-department-head small {
  color: #7a898d;
}

.lifecycle-mini-progress {
  background: #e7eeee;
  border-radius: 999px;
  width: 140px;
  height: 7px;
  overflow: hidden;
}

.lifecycle-mini-progress i {
  background: linear-gradient(90deg, #27b6b1, #69cec9);
  height: 100%;
  display: block;
}

.lifecycle-task-list {
  display: grid;
}

.lifecycle-task-row {
  border-bottom: 1px solid #edf1f2;
  grid-template-columns: 34px minmax(230px, 1.2fr) minmax(360px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  display: grid;
}

.lifecycle-task-row:last-child {
  border-bottom: 0;
}

.lifecycle-task-state {
  color: #64767a;
  background: #eef3f4;
  border-radius: 10px;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 900;
  display: grid;
}

.lifecycle-task-state.status-in_progress {
  color: #247b77;
  background: #e2f4f2;
}

.lifecycle-task-state.status-blocked {
  color: #a85d29;
  background: #fff1e8;
}

.lifecycle-task-state.status-done {
  color: #277848;
  background: #e6f7ed;
}

.lifecycle-task-state.status-cancelled {
  color: #7b8589;
  background: #f0f2f3;
}

.lifecycle-task-copy {
  gap: 4px;
  display: grid;
}

.lifecycle-task-copy strong {
  color: #2b484d;
}

.lifecycle-task-copy span {
  color: #7a898d;
}

.lifecycle-task-copy p {
  color: #5f7479;
  margin: 2px 0 0;
}

.lifecycle-task-update {
  grid-template-columns: 125px minmax(180px, 1fr) auto;
  align-items: center;
  gap: 8px;
  display: grid;
}

.lifecycle-task-update input, .lifecycle-task-update select {
  min-height: 36px;
  padding: 8px 9px;
}

.lifecycle-task-status.status-pending {
  color: #69797d;
  background: #f4f6f6;
}

.lifecycle-task-status.status-in_progress {
  color: #277b76;
  background: #e9f7f5;
}

.lifecycle-task-status.status-blocked {
  color: #a65826;
  background: #fff0e8;
}

.lifecycle-task-status.status-done {
  color: #267747;
  background: #e8f8ee;
}

.lifecycle-task-status.status-cancelled {
  color: #7a8386;
  background: #f1f2f3;
}

.lifecycle-danger-zone {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  display: flex;
  background: #fffaf8 !important;
  border-color: #f0d9d3 !important;
}

.lifecycle-danger-zone h3 {
  margin: 0 0 5px;
}

.lifecycle-danger-zone p {
  margin: 0;
}

.lifecycle-danger-zone details {
  min-width: 260px;
}

.lifecycle-danger-zone details form {
  margin-top: 12px;
}

.lifecycle-task-center {
  padding: 22px;
}

.lifecycle-task-center-list {
  gap: 10px;
  margin-top: 14px;
  display: grid;
}

.lifecycle-task-center-row {
  background: #fcfefe;
  border: 1px solid #e1e9eb;
  border-radius: 13px;
  grid-template-columns: 34px minmax(300px, 1.25fr) minmax(420px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  display: grid;
}

.lifecycle-task-center-copy {
  gap: 5px;
  display: grid;
}

.lifecycle-task-center-copy > div {
  color: #78888c;
  align-items: center;
  gap: 8px;
  display: flex;
}

.lifecycle-task-center-copy strong {
  color: #29474c;
  font-size: 13px;
}

.lifecycle-task-center-copy p {
  color: #74868a;
  margin: 0;
}

.lifecycle-task-update.wide {
  grid-template-columns: 130px minmax(200px, 1fr) auto;
}

@media (max-width: 1250px) {
  .lifecycle-v2-row {
    grid-template-columns: auto minmax(220px, 1fr) auto 140px minmax(140px, .8fr);
  }

  .lifecycle-v2-row > .lifecycle-status-pill, .lifecycle-v2-row > .lifecycle-v2-open {
    grid-column: auto;
  }

  .lifecycle-detail-overview {
    grid-template-columns: 1fr 1fr;
  }

  .lifecycle-task-row {
    grid-template-columns: 34px 1fr;
  }

  .lifecycle-task-update, .lifecycle-task-status {
    grid-column: 2;
  }

  .lifecycle-task-center-row {
    grid-template-columns: 34px 1fr;
  }

  .lifecycle-task-center-row > .lifecycle-task-update, .lifecycle-task-center-row > .text-link {
    grid-column: 2;
  }
}

@media (max-width: 900px) {
  .lifecycle-v2-stats {
    grid-template-columns: 1fr 1fr;
  }

  .lifecycle-v2-create-grid {
    grid-template-columns: 1fr;
  }

  .lifecycle-v2-create-panel + .lifecycle-v2-create-panel {
    border-top: 1px solid #e6edef;
    border-left: 0;
  }

  .lifecycle-v2-row {
    grid-template-columns: auto 1fr;
  }

  .lifecycle-v2-row > :not(.lifecycle-v2-avatar):not(.lifecycle-v2-person) {
    grid-column: 2;
  }

  .lifecycle-detail-overview {
    grid-template-columns: 1fr;
  }

  .lifecycle-danger-zone {
    display: grid;
  }

  .lifecycle-task-update.wide {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .lifecycle-v2-stats {
    grid-template-columns: 1fr;
  }

  .lifecycle-v2-create-panel {
    padding: 18px;
  }

  .lifecycle-detail-timeline, .lifecycle-task-center {
    padding: 16px;
  }

  .lifecycle-task-update {
    grid-template-columns: 1fr;
  }

  .lifecycle-task-update > * {
    width: 100%;
  }

  .lifecycle-mini-progress {
    width: 90px;
  }
}

.procurement-page-header {
  align-items: flex-end;
}

.procurement-hero {
  background: linear-gradient(#fff, #f8fcfb);
  border-color: #dce9ea;
  padding: 24px 26px;
  box-shadow: 0 9px 30px #1f53550e;
}

.procurement-kicker {
  color: #247d79;
  font-size: var(--admin-font-size, 11px);
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #eaf7f5;
  border-radius: 999px;
  align-items: center;
  padding: 5px 10px;
  font-weight: 800;
  display: inline-flex;
}

.procurement-hero h2 {
  color: #19393e;
  margin: 10px 0 7px;
  font-size: 20px;
}

.procurement-hero p {
  max-width: 900px;
  margin: 0;
  line-height: 1.55;
}

.procurement-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
  display: grid;
}

.procurement-stats > div {
  background: #fff;
  border: 1px solid #dce8e8;
  border-radius: 14px;
  gap: 5px;
  padding: 15px 16px;
  display: grid;
  box-shadow: 0 4px 14px #1f535509;
}

.procurement-stats small {
  color: #718489;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.procurement-stats strong {
  color: #21454a;
  font-size: 26px;
  line-height: 1;
}

.procurement-stats span {
  color: #75868a;
}

.procurement-inbox-card {
  padding: 22px;
}

.procurement-table-wrap {
  border-radius: 14px;
}

.procurement-purpose-cell {
  white-space: normal;
  color: #40575c;
  max-width: 330px;
  line-height: 1.45;
}

.procurement-status, .procurement-source {
  white-space: nowrap;
  color: #607176;
  background: #f0f3f4;
  border: 1px solid #e0e6e8;
  border-radius: 999px;
  align-items: center;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.procurement-status.status-approved {
  color: #187255;
  background: #e8f8f3;
  border-color: #ccebdd;
}

.procurement-status.status-submitted {
  color: #8a6107;
  background: #fff5dc;
  border-color: #f3dfb1;
}

.procurement-status.status-ordered {
  color: #2d64a3;
  background: #eaf4ff;
  border-color: #cee1f5;
}

.procurement-status.status-received {
  color: #347646;
  background: #ecf9ee;
  border-color: #d2ebd7;
}

.procurement-status.status-rejected, .procurement-status.status-cancelled {
  color: #9a4141;
  background: #fff0f0;
  border-color: #f0d1d1;
}

.procurement-source.source-form {
  color: #287b78;
  background: #edf7f6;
  border-color: #d6e9e8;
}

.procurement-inline-note {
  margin: 12px 0 0;
  line-height: 1.5;
}

.procurement-support-grid {
  align-items: start;
}

.procurement-details > summary {
  cursor: pointer;
  width: max-content;
  list-style: none;
}

.procurement-details > summary::-webkit-details-marker {
  display: none;
}

.procurement-process-guide {
  gap: 10px;
  display: grid;
}

.procurement-process-guide > div {
  border-bottom: 1px dashed #e3ebec;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 10px;
  padding: 10px 0;
  display: grid;
}

.procurement-process-guide > div:last-child {
  border-bottom: 0;
}

.procurement-process-guide > div > span {
  color: #247d79;
  background: #eaf7f5;
  border-radius: 9px;
  place-items: center;
  width: 28px;
  height: 28px;
  font-weight: 900;
  display: grid;
}

.procurement-process-guide p {
  gap: 2px;
  margin: 0;
  display: grid;
}

.procurement-process-guide small {
  color: #74858a;
}

.procurement-detail-hero {
  background: linear-gradient(#fff, #f9fcfc);
  gap: 18px;
  padding: 22px 24px;
  display: grid;
}

.procurement-detail-status {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  display: flex;
}

.procurement-detail-status small {
  color: #78898d;
}

.procurement-detail-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.procurement-detail-metrics > div {
  background: #fff;
  border: 1px solid #dfe9ea;
  border-radius: 12px;
  gap: 5px;
  padding: 13px 14px;
  display: grid;
}

.procurement-detail-metrics small {
  color: #74858a;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.procurement-detail-metrics strong {
  color: #27494e;
}

.procurement-detail-layout {
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .7fr);
  align-items: start;
  gap: 18px;
  display: grid;
}

.procurement-detail-side {
  position: sticky;
  top: 92px;
}

.procurement-next-step {
  background: linear-gradient(#fff, #f8fcfb);
  border-color: #cfe8e5;
}

.procurement-po-footer {
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  display: flex;
}

.procurement-timeline {
  gap: 0;
  display: grid;
}

.procurement-timeline > div {
  grid-template-columns: 30px 1fr;
  align-items: start;
  gap: 10px;
  padding: 0 0 18px;
  display: grid;
  position: relative;
}

.procurement-timeline > div:not(:last-child):before {
  content: "";
  background: #e5ebed;
  width: 2px;
  position: absolute;
  top: 29px;
  bottom: 0;
  left: 14px;
}

.procurement-timeline > div > span {
  color: #728287;
  z-index: 1;
  background: #f1f4f5;
  border-radius: 999px;
  place-items: center;
  width: 30px;
  height: 30px;
  font-weight: 900;
  display: grid;
}

.procurement-timeline p {
  gap: 2px;
  margin: 2px 0 0;
  display: grid;
}

.procurement-timeline small {
  color: #7c8b8f;
}

.procurement-timeline > div.done > span {
  color: #187057;
  background: #e3f5ef;
}

.procurement-timeline > div.current > span {
  color: #1b7f7b;
  background: #dff4f3;
  box-shadow: 0 0 0 4px #25b7b314;
}

@media (max-width: 1100px) {
  .procurement-stats, .procurement-detail-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .procurement-detail-layout {
    grid-template-columns: 1fr;
  }

  .procurement-detail-side {
    position: static;
  }
}

@media (max-width: 700px) {
  .procurement-stats, .procurement-detail-metrics {
    grid-template-columns: 1fr;
  }

  .procurement-hero, .procurement-inbox-card, .procurement-detail-hero {
    padding: 18px;
  }

  .procurement-po-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .procurement-po-footer form, .procurement-po-footer button {
    width: 100%;
  }
}

.operations-monitor-header {
  align-items: flex-end;
}

.operations-kicker {
  color: #247b78;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #eef7f6;
  border-radius: 999px;
  align-items: center;
  margin-bottom: 8px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.operations-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.operations-summary-card {
  gap: 6px;
  min-height: 118px;
  padding: 18px;
  display: grid;
}

.operations-summary-card small {
  color: #718287;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 800;
}

.operations-summary-card strong {
  color: #21464b;
  font-size: 30px;
  line-height: 1;
}

.operations-summary-card span {
  color: #74868a;
}

.operations-section-title {
  align-items: end;
}

.operations-section-title h2 {
  margin: 0 0 4px;
}

.operations-cadence-pill {
  color: #396267;
  white-space: nowrap;
  background: #f5fbfa;
  border: 1px solid #d8e7e7;
  border-radius: 999px;
  align-items: center;
  padding: 8px 11px;
  font-weight: 800;
  display: inline-flex;
}

.operations-scheduler-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.scheduler-monitor-card {
  background: linear-gradient(#fff, #fbfdfd);
  border-color: #dfe9ea;
  gap: 14px;
  padding: 20px;
  display: grid;
}

.scheduler-monitor-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  display: flex;
}

.scheduler-monitor-head h3 {
  color: #24464b;
  margin: 5px 0 0;
  font-size: 15px;
}

.scheduler-module {
  color: #2a7773;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #eef7f6;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
}

.scheduler-state {
  letter-spacing: .03em;
  white-space: nowrap;
  border: 1px solid #0000;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
}

.scheduler-state.success {
  color: #207542;
  background: #e9f9ef;
  border-color: #ccebd5;
}

.scheduler-state.info {
  color: #1e6592;
  background: #e9f5ff;
  border-color: #cfe6fa;
}

.scheduler-state.warning {
  color: #8b5f08;
  background: #fff5dd;
  border-color: #f5dfae;
}

.scheduler-state.danger {
  color: #a83d3d;
  background: #fff0f0;
  border-color: #f3caca;
}

.scheduler-state.neutral {
  color: #66757a;
  background: #f2f4f5;
  border-color: #e1e5e7;
}

.scheduler-description {
  margin: 0;
  line-height: 1.5;
}

.scheduler-monitor-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.scheduler-monitor-metrics > div {
  background: #fff;
  border: 1px solid #e2eaeb;
  border-radius: 12px;
  gap: 5px;
  padding: 12px;
  display: grid;
}

.scheduler-monitor-metrics small {
  color: #78898d;
}

.scheduler-monitor-metrics strong {
  color: #24464b;
  font-size: 14px;
}

.scheduler-monitor-detail {
  gap: 12px;
  padding-top: 2px;
  display: grid;
}

.scheduler-monitor-detail > p {
  color: #5d7378;
  background: #f5f8f8;
  border-radius: 10px;
  margin: 0;
  padding: 10px 12px;
  line-height: 1.5;
}

.scheduler-monitor-detail dl {
  gap: 8px;
  margin: 0;
  display: grid;
}

.scheduler-monitor-detail dl > div {
  border-bottom: 1px dashed #e2e8e9;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 8px;
  display: flex;
}

.scheduler-monitor-detail dl > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.scheduler-monitor-detail dt {
  color: #7b898d;
}

.scheduler-monitor-detail dd {
  text-align: right;
  color: #35555a;
  margin: 0;
  font-weight: 700;
}

.scheduler-error-box {
  color: #963d3d;
  background: #fff5f5;
  border: 1px solid #f0cccc;
  border-radius: 10px;
  gap: 4px;
  padding: 11px 12px;
  display: grid;
}

.scheduler-error-box span {
  word-break: break-word;
  line-height: 1.45;
}

.operations-next-card {
  gap: 16px;
  padding: 22px;
  display: grid;
}

.operations-next-card h2 {
  margin: 2px 0 0;
}

.operations-next-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.operations-next-grid > div {
  background: #fbfdfd;
  border: 1px solid #e0e9ea;
  border-radius: 13px;
  gap: 6px;
  padding: 15px;
  display: grid;
}

.operations-next-grid small {
  color: #78898d;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 800;
}

.operations-next-grid strong {
  color: #24464b;
  font-size: 13px;
}

.operations-next-grid span {
  color: #728388;
  line-height: 1.45;
}

.operations-table-wrap {
  border-radius: 16px;
}

.operations-table-wrap td {
  vertical-align: top;
}

.shell[data-admin-theme="MODERN"] .scheduler-monitor-card, .shell[data-admin-theme="MODERN"] .operations-summary-card, .shell[data-admin-theme="MODERN"] .operations-next-card {
  border-color: #dce9ea;
  box-shadow: 0 8px 26px #1f53550b;
}

@media (max-width: 1180px) {
  .operations-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operations-scheduler-grid, .operations-next-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .operations-summary-grid, .scheduler-monitor-metrics {
    grid-template-columns: 1fr;
  }

  .operations-section-title {
    display: grid;
  }

  .operations-cadence-pill {
    justify-self: start;
  }

  .scheduler-monitor-head {
    display: grid;
  }

  .scheduler-state {
    justify-self: start;
  }
}

.form-process-header {
  align-items: flex-end;
}

.form-process-header .eyebrow {
  margin: 9px 0 4px;
  display: block;
}

.form-process-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.form-process-summary-card {
  gap: 6px;
  min-height: 112px;
  display: grid;
}

.form-process-summary-card small {
  color: #74858a;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 800;
}

.form-process-summary-card strong {
  color: #21444a;
  font-size: 17px;
}

.form-process-summary-card span {
  color: #7b898d;
}

.form-process-layout {
  grid-template-columns: minmax(0, 1.6fr) minmax(290px, .72fr);
  align-items: start;
  gap: 18px;
  display: grid;
}

.form-process-panel {
  padding: 22px;
}

.form-process-side {
  position: sticky;
  top: 92px;
}

.form-process-side-card {
  padding: 18px;
}

.form-process-side-card h3 {
  margin: 7px 0 14px;
}

.form-process-timeline {
  gap: 10px;
  margin-top: 16px;
  display: grid;
}

.form-process-step {
  background: #fbfdfd;
  border: 1px solid #e1e9ea;
  border-radius: 14px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: start;
  gap: 13px;
  padding: 15px;
  display: grid;
}

.form-process-step.active {
  background: #f5fcfb;
  border-color: #8dd7d3;
  box-shadow: 0 0 0 2px #25b7b312;
}

.form-process-step-index {
  color: #31716f;
  background: #edf5f5;
  border-radius: 11px;
  place-items: center;
  width: 34px;
  height: 34px;
  font-weight: 900;
  display: grid;
}

.form-process-step.active .form-process-step-index {
  color: #137d79;
  background: #dff5f3;
}

.form-process-step-main {
  gap: 8px;
  display: grid;
}

.form-process-step-title {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.form-process-step-title strong {
  color: #26454a;
  font-size: 13px;
}

.form-process-step-meta {
  color: #728287;
  flex-wrap: wrap;
  gap: 7px 14px;
  display: flex;
}

.form-process-step-meta b {
  color: #4f676c;
}

.form-process-note {
  color: #526a6f;
  background: #f1f5f5;
  border-radius: 9px;
  padding: 9px 10px;
}

.form-process-step-action {
  align-self: center;
}

.process-status {
  white-space: nowrap;
  color: #64747a;
  background: #eef1f2;
  border-radius: 999px;
  align-items: center;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
}

.process-status.status-pending {
  color: #8a5a00;
  background: #fff5d9;
}

.process-status.status-waiting {
  color: #66747b;
  background: #f2f4f6;
}

.process-status.status-approved {
  color: #187346;
  background: #e4f8ec;
}

.process-status.status-rejected {
  color: #a33;
  background: #fff0f0;
}

.process-status.status-cancelled {
  color: #697177;
  background: #f1f2f4;
}

.process-status.status-submitted {
  color: #315e86;
  background: #eef6ff;
}

.form-process-data-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  display: grid;
}

.form-process-data-grid > div {
  background: #fafcfc;
  border: 1px solid #e5ecee;
  border-radius: 11px;
  gap: 5px;
  padding: 12px 13px;
  display: grid;
}

.form-process-data-grid > div.wide {
  grid-column: 1 / -1;
}

.form-process-data-grid span {
  color: #728287;
}

.form-process-data-grid b {
  color: #28484d;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
}

.downstream-panel {
  background: linear-gradient(#fff, #f8fcfb);
  border-color: #cfe7e5;
}

.form-process-owner {
  background: #f6fafa;
  border: 1px solid #e0eaeb;
  border-radius: 12px;
  gap: 6px;
  margin-bottom: 12px;
  padding: 13px;
  display: grid;
}

.form-process-owner strong {
  color: #21464b;
}

.form-process-owner span {
  color: #337875;
  font-weight: 800;
}

.form-process-owner b {
  font-size: 12px;
}

.form-process-owner small {
  color: #74858a;
  line-height: 1.45;
}

.form-process-push {
  width: 100%;
}

.form-process-delivery-list {
  gap: 0;
  display: grid;
}

.form-process-delivery-list > div {
  border-bottom: 1px dashed #e1e8e9;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  display: flex;
}

.form-process-delivery-list > div:last-child {
  border-bottom: 0;
}

.form-process-delivery-list span {
  color: #74858a;
}

.form-process-delivery-list b {
  text-align: right;
  color: #29494e;
}

.form-process-help-list {
  color: #687b80;
  gap: 8px;
  margin: 0 0 14px;
  padding-left: 18px;
  line-height: 1.5;
  display: grid;
}

.status-badge.pending {
  color: #8b5b00;
  background: #fff4d6;
}

.shell[data-admin-theme="MODERN"] .form-process-summary-card, .shell[data-admin-theme="MODERN"] .form-process-panel, .shell[data-admin-theme="MODERN"] .form-process-side-card {
  border-color: #dce9ea;
  box-shadow: 0 7px 24px #1f53550b;
}

@media (max-width: 1100px) {
  .form-process-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-process-layout {
    grid-template-columns: 1fr;
  }

  .form-process-side {
    position: static;
  }
}

@media (max-width: 700px) {
  .form-process-summary-grid, .form-process-data-grid {
    grid-template-columns: 1fr;
  }

  .form-process-step {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .form-process-step-action {
    grid-column: 2;
  }

  .form-process-step-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .form-process-data-grid > div.wide {
    grid-column: auto;
  }
}

.m-approval-history {
  background: linear-gradient(#fcfbff, #fff);
  border: 1px solid #e5e1f5;
  border-radius: 14px;
  margin-top: 12px;
  overflow: hidden;
}

.m-approval-history-head {
  background: #f8f5ff;
  border-bottom: 1px solid #eeeaf8;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}

.m-approval-history-head > div {
  gap: 2px;
  display: grid;
}

.m-approval-history-head strong {
  color: #3c3158;
  font-size: 12px;
}

.m-approval-history-head small {
  color: #817797;
  font-size: 10px;
}

.m-approval-history-head > span {
  color: #6d43c1;
  background: #ece5ff;
  border-radius: 999px;
  flex: none;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 800;
}

.m-approval-history-list {
  display: grid;
}

.m-approval-history-item {
  border-bottom: 1px solid #f0edf6;
  grid-template-columns: minmax(120px, .85fr) minmax(160px, 1.15fr) minmax(110px, .7fr);
  gap: 10px 14px;
  padding: 13px 14px;
  display: grid;
}

.m-approval-history-item:last-child {
  border-bottom: 0;
}

.m-approval-history-step {
  align-content: start;
  gap: 3px;
  display: grid;
}

.m-approval-history-step > span {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8d84a1;
  font-size: 9px;
  font-weight: 800;
}

.m-approval-history-step > b {
  color: #332b46;
  font-size: 11px;
}

.m-approval-history-meta {
  align-content: start;
  gap: 3px;
  display: grid;
}

.m-approval-history-meta > span {
  color: #413851;
  font-size: 11px;
  font-weight: 700;
}

.m-approval-history-meta > small {
  color: #8a8199;
  font-size: 9px;
}

.m-approval-history-decision {
  align-content: start;
  justify-items: end;
  gap: 4px;
  display: grid;
}

.m-approval-history-decision > small {
  color: #8a8199;
  font-size: 9px;
}

.m-history-status {
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 9px;
  font-weight: 900;
  display: inline-flex;
}

.m-history-status.status-approved {
  color: #177348;
  background: #e6f8ef;
}

.m-history-status.status-rejected {
  color: #b42318;
  background: #feeceb;
}

.m-history-status.status-skipped {
  color: #66727b;
  background: #eef1f4;
}

.m-history-status.status-waiting, .m-history-status.status-pending {
  color: #8b6406;
  background: #fff6dc;
}

.m-approval-history-note {
  background: #f7f7fa;
  border-radius: 10px;
  grid-column: 1 / -1;
  padding: 9px 10px;
}

.m-approval-history-note > small {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #91899d;
  margin-bottom: 3px;
  font-size: 9px;
  font-weight: 800;
  display: block;
}

.m-approval-history-note > p {
  color: #4f465c !important;
  margin: 0 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

@media (max-width: 640px) {
  .m-approval-history-item {
    grid-template-columns: 1fr;
  }

  .m-approval-history-decision {
    justify-items: start;
  }

  .m-approval-history-note {
    grid-column: auto;
  }
}

.m-approval-actions .m-approve-form, .m-approval-actions .m-reject-form {
  gap: 7px;
  display: grid;
}

.m-approval-actions .m-approve-form input, .m-approval-actions .m-reject-form input {
  min-height: 40px;
}

.procurement-inline-vendor-flow {
  background: #f8fcfb;
  border: 1px solid #dce8e8;
  border-radius: 14px;
  gap: 10px;
  margin: 16px 0;
  padding: 14px;
  display: grid;
}

.procurement-inline-vendor-head {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  display: flex;
}

.procurement-inline-vendor-head > div {
  gap: 3px;
  display: grid;
}

.procurement-inline-vendor-form {
  border-top: 1px dashed #dce8e8;
  max-width: none;
  margin-top: 12px;
  padding-top: 14px;
}

.procurement-po-create-form {
  border-top: 1px solid #e6eeee;
  max-width: none;
  margin-top: 18px;
  padding-top: 18px;
}

.summary-card {
  background: #fff;
  border: 1px solid #dfe8ea;
  border-radius: 14px;
  gap: 6px;
  padding: 15px 16px;
  display: grid;
}

.summary-card > span {
  color: #657a80;
  font-size: 11px;
  font-weight: 700;
}

.summary-card > strong {
  color: #183f46;
  font-size: 22px;
  line-height: 1;
}

.summary-card > small {
  color: #7d8c90;
  font-size: 11px;
}

.details-card {
  background: #fbfdfd;
  border: 1px solid #e0e8ea;
  border-radius: 12px;
  padding: 12px;
}

.details-card > summary {
  cursor: pointer;
  color: #24565c;
  font-weight: 800;
}

.security-session-header {
  align-items: flex-end;
}

.security-kicker {
  color: #257c78;
  letter-spacing: .07em;
  background: #edf7f6;
  border-radius: 999px;
  align-items: center;
  margin-bottom: 8px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.security-kicker.danger {
  color: #b43c32;
  background: #fff0ee;
}

.security-header-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.security-summary-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.security-summary {
  gap: 5px;
  padding: 16px;
  display: grid;
}

.security-summary small {
  color: #708286;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.security-summary strong {
  color: #21464a;
  font-size: 27px;
  line-height: 1;
}

.security-summary span {
  color: #7c8d90;
}

.security-emergency-card {
  background: linear-gradient(#fff, snow);
  border-color: #f0d2ce;
}

.security-card-head h2 {
  margin: 7px 0 4px;
}

.security-kick-all-form {
  grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.4fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 16px;
  display: grid;
}

.security-kick-all-form label {
  color: #52656a;
  gap: 6px;
  font-weight: 750;
  display: grid;
}

.security-warning-note {
  margin: 10px 0 0;
}

.security-session-table-wrap table {
  min-width: 1180px;
}

.security-presence {
  white-space: nowrap;
  border-radius: 999px;
  align-items: center;
  padding: 6px 9px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.security-presence.online {
  color: #1f7a43;
  background: #e8f8ee;
}

.security-presence.idle {
  color: #8b6305;
  background: #fff6dd;
}

.security-presence.revoked {
  color: #a43b35;
  background: #feeceb;
}

.security-presence.expired {
  color: #68757a;
  background: #f0f2f3;
}

.security-revoked-reason {
  color: #8a6662;
  max-width: 220px;
  margin-top: 5px;
  line-height: 1.35;
  display: block;
}

.security-inline-kick {
  gap: 6px;
  min-width: 220px;
  display: flex;
}

.security-inline-kick input {
  min-width: 130px;
  height: 34px;
}

.security-ua {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  display: inline-block;
  overflow: hidden;
}

@media (max-width: 1180px) {
  .security-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .security-kick-all-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .security-summary-grid {
    grid-template-columns: 1fr;
  }

  .security-header-actions {
    width: 100%;
  }

  .security-header-actions .button {
    flex: 1;
  }

  .security-inline-kick {
    min-width: 190px;
  }
}

.button.danger {
  color: #fff;
  box-shadow: none;
  background: #c94036;
  border-color: #c94036;
}

.button.danger:hover {
  background: #b7352c;
  border-color: #b7352c;
}

.access-matrix-header {
  align-items: flex-end;
}

.access-matrix-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.access-matrix-layout {
  grid-template-columns: minmax(280px, .72fr) minmax(0, 2fr);
  align-items: start;
  gap: 18px;
  display: grid;
}

.access-matrix-sidebar {
  max-height: calc(100vh - 110px);
  padding: 16px;
  position: sticky;
  top: 88px;
  overflow: auto;
}

.access-matrix-tabs {
  background: #f5f9f9;
  border: 1px solid #dfe8e9;
  border-radius: 12px;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 5px;
  display: grid;
}

.access-matrix-tabs a {
  text-align: center;
  color: #61767a;
  border-radius: 9px;
  padding: 9px 8px;
  font-weight: 800;
  text-decoration: none;
}

.access-matrix-tabs a.active {
  color: #176c69;
  background: #fff;
  box-shadow: 0 2px 10px #1f535514;
}

.access-matrix-create-form {
  border-bottom: 1px solid #e6eeee;
  gap: 9px;
  padding: 16px 2px;
  display: grid;
}

.access-matrix-create-form .two-col {
  gap: 8px;
}

.access-target-list {
  gap: 7px;
  padding-top: 14px;
  display: grid;
}

.access-target-list > a {
  color: #27474c;
  background: #fff;
  border: 1px solid #e1e9ea;
  border-radius: 11px;
  gap: 3px;
  padding: 11px 12px;
  text-decoration: none;
  display: grid;
}

.access-target-list > a span {
  color: #7b8b8f;
  font-size: 10px;
}

.access-target-list > a.active {
  background: #effaf9;
  border-color: #63c7c2;
  box-shadow: 0 0 0 2px #25b7b314;
}

.access-matrix-editor {
  padding: 0;
  overflow: hidden;
}

.access-matrix-editor-head {
  background: linear-gradient(#fff, #fbfdfd);
  border-bottom: 1px solid #e6eeee;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 24px;
  display: flex;
}

.access-matrix-editor-head h2 {
  margin: 8px 0 5px;
  font-size: 20px;
}

.access-matrix-editor-head p {
  max-width: 760px;
  margin: 0;
  line-height: 1.5;
}

.access-inheritance-summary {
  text-align: right;
  background: #fff;
  border: 1px solid #dce9e9;
  border-radius: 12px;
  gap: 4px;
  min-width: 150px;
  padding: 12px 14px;
  display: grid;
}

.access-inheritance-summary span {
  color: #77898d;
  font-size: 10px;
}

.access-inheritance-summary strong {
  color: #23565a;
  font-size: 18px;
}

.access-permission-form {
  padding: 0 24px 22px;
  display: grid;
}

.permission-group-card {
  border: 0;
  border-bottom: 1px solid #e9eeee;
  padding: 0;
}

.permission-group-card > summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  list-style: none;
  display: flex;
}

.permission-group-card > summary::-webkit-details-marker {
  display: none;
}

.permission-group-card > summary > div {
  gap: 3px;
  display: grid;
}

.permission-group-card > summary strong {
  color: #1f4045;
  font-size: 14px;
}

.permission-group-card > summary span {
  color: #77888c;
  font-size: 11px;
}

.permission-group-card > summary > b {
  color: #2b7774;
  background: #eef7f6;
  border-radius: 999px;
  padding: 6px 8px;
  font-size: 10px;
}

.permission-checkbox-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 0 0 18px;
  display: grid;
}

.permission-choice {
  background: #fcfefe;
  border: 1px solid #e0e8e9;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 11px 12px;
  display: flex;
}

.permission-choice:hover {
  background: #fff;
  border-color: #bfdedc;
}

.permission-choice.protected {
  opacity: .78;
  background: #f6f7f8;
}

.permission-choice-copy {
  gap: 3px;
  min-width: 0;
  display: grid;
}

.permission-choice-copy > strong {
  color: #29494e;
  font-size: 11px;
}

.permission-choice-copy code {
  color: #89979a;
  overflow-wrap: anywhere;
  font-size: 9px;
}

.permission-source {
  color: #24744c;
  background: #e9f7f1;
  border-radius: 999px;
  width: max-content;
  padding: 3px 6px;
  font-size: 9px;
  font-weight: 800;
  display: inline-flex;
}

.permission-toggle, .permission-override-options label {
  white-space: nowrap;
  color: #576d72;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  display: flex;
}

.permission-toggle input, .permission-override-options input {
  accent-color: #25a9a5;
  width: 15px;
  height: 15px;
  min-height: 0;
  margin: 0;
}

.permission-override-options {
  gap: 7px;
  min-width: 84px;
  display: grid;
}

.permission-override-options label:last-child {
  color: #9b4c45;
}

.access-matrix-savebar {
  background: linear-gradient(#fff0, #fff 24%);
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 14px 0 0;
  display: flex;
  position: sticky;
  bottom: 0;
}

.access-matrix-savebar > div {
  gap: 3px;
  display: grid;
}

.access-matrix-savebar span {
  color: #7b898d;
  font-size: 10px;
}

.access-matrix-savebar .button {
  min-width: 190px;
}

.access-policy-explainer {
  padding: 20px 22px;
}

.access-policy-flow {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  display: flex;
}

.access-policy-flow span, .access-policy-flow strong {
  background: #f0f7f7;
  border: 1px solid #dce9e9;
  border-radius: 10px;
  padding: 9px 11px;
}

.access-policy-flow strong {
  color: #1f6f6b;
  background: #e7f8f5;
}

@media (max-width: 1180px) {
  .access-matrix-layout {
    grid-template-columns: 1fr;
  }

  .access-matrix-sidebar {
    max-height: none;
    position: static;
  }

  .permission-checkbox-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .access-matrix-metrics, .permission-checkbox-grid {
    grid-template-columns: 1fr;
  }

  .access-matrix-editor-head, .access-matrix-savebar {
    flex-direction: column;
    align-items: stretch;
  }

  .access-permission-form {
    padding-left: 16px;
    padding-right: 16px;
  }

  .access-matrix-tabs {
    grid-template-columns: 1fr;
  }

  .access-inheritance-summary {
    text-align: left;
  }
}

.permission-override-options select {
  border-radius: 9px;
  min-width: 105px;
  min-height: 34px;
  padding: 6px 28px 6px 8px;
  font-size: 10px;
}

.m-dynamic-greeting {
  background: #fff;
  border: 1px solid #e4eaec;
  border-radius: 24px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  min-height: 160px;
  margin: 0;
  padding: 22px 24px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px #1f484f0f;
}

.m-dynamic-greeting-copy {
  z-index: 2;
  gap: 5px;
  max-width: 68%;
  display: grid;
  position: relative;
}

.m-dynamic-greeting-copy p {
  border-radius: 999px;
  width: max-content;
  margin: 0 0 2px;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.m-dynamic-greeting-copy h1 {
  letter-spacing: -.035em;
  margin: 0;
  font-size: clamp(25px, 4vw, 34px);
  line-height: 1.08;
}

.m-dynamic-greeting-copy span {
  color: #66777b;
  max-width: 620px;
  line-height: 1.55;
}

.m-dynamic-greeting-copy small {
  color: #89979a;
  text-transform: capitalize;
  margin-top: 2px;
}

.m-dynamic-greeting-image {
  z-index: 1;
  object-fit: contain;
  width: 210px;
  max-width: 31%;
  height: 125px;
  position: relative;
}

.m-dynamic-greeting.morning {
  background: linear-gradient(125deg, #fff 0%, #f2fcf8 56%, #e8f8f1 100%);
  border-color: #dceee7;
}

.m-dynamic-greeting.morning .m-dynamic-greeting-copy p {
  color: #23785d;
  background: #e9f8f1;
}

.m-dynamic-greeting.afternoon {
  background: linear-gradient(125deg, #fff 0%, #fff9ed 56%, #fff0e2 100%);
  border-color: #f1e4d4;
}

.m-dynamic-greeting.afternoon .m-dynamic-greeting-copy p {
  color: #a46816;
  background: #fff0d9;
}

.m-dynamic-greeting.evening {
  background: linear-gradient(125deg, #fff 0%, #f2f2fa 56%, #e5e7f4 100%);
  border-color: #dfe1ee;
}

.m-dynamic-greeting.evening .m-dynamic-greeting-copy p {
  color: #54547e;
  background: #e9e9f7;
}

.m-dynamic-greeting.evening .m-dynamic-greeting-copy h1 {
  color: #353751;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-morning {
  background: linear-gradient(125deg, #fff 0%, #effbf6 55%, #e4f7ee 100%);
  border-color: #d8ede4;
  box-shadow: 0 16px 38px #43977617;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-morning:before {
  background: #dff7ec;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-morning .youth-kicker {
  color: #2e8768;
  background: #e5f8ef;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-morning h1 {
  color: #2d6f59;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-afternoon {
  background: linear-gradient(125deg, #fff 0%, #fff9ea 54%, #ffeadb 100%);
  border-color: #f0dfcc;
  box-shadow: 0 16px 38px #c1894117;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-afternoon:before {
  background: #fff0cf;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-afternoon .youth-kicker {
  color: #a66d1c;
  background: #fff0d7;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-afternoon h1 {
  color: #815923;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-evening {
  background: linear-gradient(125deg, #fff 0%, #f2f1fb 54%, #e5e6f5 100%);
  border-color: #dedff0;
  box-shadow: 0 16px 38px #4648771a;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-evening:before {
  background: #e1e2f5;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-evening .youth-kicker {
  color: #575784;
  background: #e9e8f8;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-evening h1 {
  color: #3e405f;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome.youth-welcome-evening p {
  color: #666783;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene-image {
  flex: 0 0 240px;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 130px;
  display: flex;
}

.mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene-image img {
  object-fit: contain;
  filter: drop-shadow(0 12px 18px #33474c14);
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 720px) {
  .m-dynamic-greeting {
    min-height: 145px;
    padding: 18px;
  }

  .m-dynamic-greeting-copy {
    max-width: 72%;
  }

  .m-dynamic-greeting-image {
    width: 120px;
    max-width: 28%;
    height: 90px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene-image {
    flex-basis: 110px;
    width: 110px;
    height: 92px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome-copy {
    max-width: 72%;
  }
}

@media (max-width: 440px) {
  .m-dynamic-greeting {
    min-height: 135px;
  }

  .m-dynamic-greeting-copy {
    max-width: 75%;
  }

  .m-dynamic-greeting-image {
    width: 92px;
    height: 76px;
  }

  .m-dynamic-greeting-copy h1 {
    font-size: 24px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-scene-image {
    flex-basis: 84px;
    width: 84px;
    height: 76px;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome-copy {
    max-width: 74%;
  }

  .mobile-app[data-theme="YOUTH_PASTEL"] .youth-welcome p {
    font-size: 11px;
    line-height: 1.45;
  }
}

.company-profile-card {
  padding: 0;
  overflow: hidden;
}

.company-profile-head {
  background: linear-gradient(#fff, #fafdfc);
  border-bottom: 1px solid #e7eeee;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  display: flex;
}

.company-profile-head h2 {
  margin: 0 0 4px;
}

.company-profile-head p {
  margin: 0;
}

.company-logo-preview {
  color: #237f69;
  background: #e9f8f3;
  border: 1px solid #d6ebe5;
  border-radius: 16px;
  place-items: center;
  width: 58px;
  height: 58px;
  font-size: 18px;
  font-weight: 800;
  display: grid;
  overflow: hidden;
}

.company-logo-preview img {
  object-fit: contain;
  background: #fff;
  width: 100%;
  height: 100%;
}

.company-profile-form {
  padding: 0 26px 26px;
}

@media (max-width: 760px) {
  .company-profile-head, .company-profile-form {
    padding-left: 18px;
    padding-right: 18px;
  }
}

.company-logo-upload-panel {
  background: #fbfdfd;
  border: 1px solid #dfe9ea;
  border-radius: 14px;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin: 18px 0 4px;
  padding: 16px 18px;
  display: flex;
}

.company-logo-upload-panel h3 {
  margin: 0 0 4px;
}

.company-logo-upload-panel p {
  margin: 0;
}

.company-logo-upload-form {
  align-items: center;
  gap: 10px;
  min-width: min(100%, 520px);
  display: flex;
}

.company-logo-upload-form input[type="file"] {
  background: #fff;
  border: 1px solid #dbe4e6;
  border-radius: 10px;
  flex: 1;
  min-height: 40px;
  padding: 8px;
}

@media (max-width: 760px) {
  .company-logo-upload-panel, .company-logo-upload-form {
    flex-direction: column;
    align-items: stretch;
  }

  .company-logo-upload-form {
    min-width: 0;
  }
}

.crm-v2-header {
  align-items: flex-end;
}

.crm-v2-hero {
  margin-top: 4px;
}

.crm-ticket-summary {
  padding: 20px 22px;
}

.crm-timeline {
  gap: 0;
  display: grid;
}

.crm-timeline-item {
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 0 0 18px;
  display: grid;
  position: relative;
}

.crm-timeline-item:before {
  content: "";
  background: #dce9e8;
  width: 1px;
  position: absolute;
  top: 15px;
  bottom: 0;
  left: 6px;
}

.crm-timeline-item:last-child:before {
  display: none;
}

.crm-timeline-dot {
  z-index: 1;
  background: #3eb8aa;
  border: 3px solid #e7f8f5;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  margin-top: 5px;
}

.crm-timeline-content {
  background: #fff;
  border: 1px solid #e2ecec;
  border-radius: 14px;
  padding: 13px 14px;
}

.crm-timeline-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.crm-timeline-head span {
  color: #7b898c;
  white-space: nowrap;
  font-size: 11px;
}

.crm-timeline-content p {
  margin: 7px 0;
  line-height: 1.5;
}

.crm-timeline-content small {
  color: #687a7e;
  margin-top: 7px;
  display: block;
}

.detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.detail-grid div {
  border: 1px solid #e3ebec;
  border-radius: 12px;
  padding: 12px;
}

.detail-grid dt {
  color: #78888c;
  margin-bottom: 5px;
  font-size: 11px;
}

.detail-grid dd {
  margin: 0;
  font-weight: 700;
}

.m-metric-row {
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
  display: grid;
}

.m-metric-row > div {
  text-align: center;
  background: #f5fbfa;
  border-radius: 14px;
  gap: 3px;
  padding: 12px 8px;
  display: grid;
}

.m-metric-row b {
  font-size: 19px;
}

.m-metric-row span {
  color: #758589;
  font-size: 10px;
}

@media (max-width: 760px) {
  .crm-timeline-head {
    display: grid;
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }
}

.crm-dashboard-filter {
  padding: 12px 16px;
}

.crm-activity-mix {
  gap: 12px;
  display: grid;
}

.crm-activity-mix > div {
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 12px;
  display: grid;
}

.crm-activity-mix span {
  color: #52676b;
  font-weight: 700;
}

.crm-activity-mix strong {
  color: #1d4347;
}

.crm-activity-mix i {
  background: linear-gradient(90deg, #35bdb7, #9ee5d9);
  border-radius: 999px;
  grid-column: 1 / -1;
  min-width: 2px;
  max-width: 100%;
  height: 7px;
  display: block;
}

.crm-sla-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 14px;
  display: grid;
}

.crm-sla-form label {
  gap: 6px;
  display: grid;
}

.crm-sla-form .check-row {
  align-items: center;
  min-height: 42px;
  display: flex;
}

.crm-sla-strip {
  border-top: 1px solid #e7eeee;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  display: grid;
}

.crm-sla-strip > div {
  background: #f7fbfb;
  border: 1px solid #e0ebeb;
  border-radius: 12px;
  gap: 4px;
  padding: 12px;
  display: grid;
}

.crm-sla-strip span {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #75888c;
  font-size: 10px;
}

.crm-sla-strip b {
  font-size: 11px;
}

.danger-text {
  color: #bf3d35 !important;
}

.success-text {
  color: #198256 !important;
}

.crm-visit-layout {
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .7fr);
  align-items: start;
  gap: 18px;
  display: grid;
}

.crm-map-card {
  padding: 14px;
  overflow: hidden;
}

.crm-map-card iframe {
  background: #eef4f4;
  border: 0;
  border-radius: 14px;
  width: 100%;
  height: 520px;
}

.crm-map-focus {
  gap: 4px;
  padding: 14px 4px 2px;
  display: grid;
}

.crm-map-focus strong {
  font-size: 15px;
}

.crm-map-focus span, .crm-map-focus small {
  color: #6f8185;
}

.crm-visit-list {
  max-height: 650px;
  padding: 16px;
  overflow: auto;
}

.crm-visit-list h2 {
  margin-top: 0;
}

.crm-visit-row {
  color: inherit;
  border: 1px solid #0000;
  border-radius: 12px;
  justify-content: space-between;
  gap: 12px;
  padding: 13px;
  text-decoration: none;
  display: flex;
}

.crm-visit-row:hover, .crm-visit-row.active {
  background: #f1fbf9;
  border-color: #cfeae5;
}

.crm-visit-row > div:first-child {
  gap: 3px;
  display: grid;
}

.crm-visit-row span, .crm-visit-row small {
  color: #708287;
}

.learning-pill.status-overdue {
  color: #a83c34;
  background: #fff0ef;
  border: 1px solid #f0c8c4;
}

@media (max-width: 1050px) {
  .crm-sla-form, .crm-sla-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-visit-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .crm-sla-form, .crm-sla-strip {
    grid-template-columns: 1fr;
  }

  .crm-map-card iframe {
    height: 360px;
  }
}

.mobile-primary-action {
  justify-content: center;
  width: 100%;
  margin-top: 12px;
  display: inline-flex;
}

.mobile-inline-actions {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.segmented-control {
  background: #78829614;
  border-radius: 14px;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  display: grid;
}

.segmented-control button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 10px 8px;
  font-weight: 700;
}

.segmented-control button.active {
  background: #fff;
  box-shadow: 0 1px 5px #1423371f;
}

.segmented-control button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.compact-card h2 {
  margin-top: 0;
}

.visit-box {
  background: #e1faf259;
  border: 1px dashed #46968259;
  border-radius: 14px;
  padding: 12px;
}

@media (max-width: 720px) {
  .mobile-inline-actions .button {
    width: auto;
  }

  .segmented-control {
    grid-template-columns: 1fr 1fr;
  }
}

.m-brand-line {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: flex;
}

.m-company-logo {
  object-fit: contain;
  background: #fff;
  border: 1px solid #94a3b847;
  border-radius: 8px;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 3px;
}

.brand-logo {
  object-fit: contain;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 4px;
}

.crm-hub-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.crm-hub-card {
  color: inherit;
  min-height: 180px;
  padding: 24px;
  text-decoration: none;
  display: block;
}

.crm-hub-card h2 {
  margin: 12px 0 8px;
}

.crm-hub-card p {
  color: var(--muted);
  line-height: 1.6;
}

.crm-hub-card > strong {
  margin-top: 14px;
  display: inline-block;
}

.crm-hub-card.disabled {
  opacity: .7;
}

.crm-calendar-layout {
  grid-template-columns: minmax(0, 1.75fr) minmax(320px, .75fr);
  align-items: start;
  gap: 16px;
  display: grid;
}

.crm-calendar-card, .crm-calendar-side {
  padding: 20px;
}

.crm-calendar-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  display: flex;
}

.crm-calendar-toolbar h2 {
  margin: 0;
}

.crm-calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  display: grid;
}

.crm-calendar-weekdays {
  text-align: center;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 700;
}

.crm-calendar-day {
  border: 1px solid var(--border);
  min-height: 116px;
  color: inherit;
  background: var(--card);
  border-radius: 14px;
  padding: 10px;
  text-decoration: none;
  transition: all .15s;
}

.crm-calendar-day:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.crm-calendar-day.selected {
  outline: 2px solid var(--accent);
  background: color-mix(in srgb,var(--accent) 5%,var(--card));
}

.crm-calendar-day.blank {
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  background: none;
  border: 0;
}

.crm-calendar-events {
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  display: flex;
}

.crm-calendar-event {
  background: color-mix(in srgb,var(--accent) 10%,var(--card));
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 8px;
  padding: 4px 6px;
  font-size: .9em;
  display: block;
  overflow: hidden;
}

.crm-calendar-event.completed {
  opacity: .65;
  text-decoration: line-through;
}

.crm-calendar-event.cancelled {
  opacity: .5;
  text-decoration: line-through;
}

.crm-email-setting {
  padding: 20px;
}

@media (max-width: 900px) {
  .crm-hub-grid, .crm-calendar-layout {
    grid-template-columns: 1fr;
  }

  .crm-calendar-day {
    min-height: 88px;
    padding: 7px;
  }

  .crm-calendar-event {
    font-size: .78em;
  }

  .crm-calendar-side {
    position: static;
  }
}

@media (max-width: 640px) {
  .crm-calendar-grid {
    gap: 4px;
  }

  .crm-calendar-day {
    border-radius: 10px;
    min-height: 68px;
  }

  .crm-calendar-events {
    display: none;
  }

  .crm-calendar-toolbar h2 {
    font-size: 16px;
  }
}

.crm-visit-requirement {
  border: 1px solid var(--border, #d9e4e6);
  background: #fff8e6bf;
  border-radius: 12px;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  display: flex;
}

.crm-visit-requirement strong {
  white-space: nowrap;
}

.crm-visit-requirement span {
  opacity: .78;
}

.crm-calendar-status-legend, .my-calendar-legend {
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 14px;
  display: flex;
}

.crm-calendar-status-legend span, .my-calendar-legend span {
  border: 1px solid #0000;
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.crm-calendar-event.scheduled, .crm-calendar-status-legend .scheduled, .my-calendar-event.crm, .my-calendar-legend .crm {
  color: #1d4ed8;
  background: #dbeafe;
  border-color: #93c5fd;
}

.crm-calendar-event.overdue, .crm-calendar-status-legend .overdue, .my-calendar-event.overdue, .my-calendar-detail.overdue, .my-calendar-legend .overdue {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fca5a5;
}

.crm-calendar-event.completed, .crm-calendar-status-legend .completed, .my-calendar-event.done, .my-calendar-detail.done, .my-calendar-legend .done {
  color: #166534;
  opacity: 1;
  background: #dcfce7;
  border-color: #86efac;
  text-decoration: none;
}

.crm-calendar-event.cancelled, .crm-calendar-status-legend .cancelled, .my-calendar-event.cancelled, .my-calendar-detail.cancelled, .my-calendar-legend .cancelled {
  color: #6b7280;
  background: #f3f4f6;
  border-color: #d1d5db;
  text-decoration: line-through;
}

.my-calendar-shell {
  padding: 16px;
}

.my-calendar-toolbar {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  display: flex;
}

.my-calendar-toolbar h2 {
  margin: 0;
  font-size: 16px;
}

.my-calendar-toolbar > a {
  border: 1px solid var(--border);
  border-radius: 10px;
  place-items: center;
  width: 34px;
  height: 34px;
  text-decoration: none;
  display: grid;
}

.my-calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  display: grid;
}

.my-calendar-grid.weekdays {
  text-align: center;
  color: var(--muted);
  margin-bottom: 5px;
  font-size: 11px;
}

.my-calendar-day {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 11px;
  min-height: 84px;
  padding: 6px;
  overflow: hidden;
}

.my-calendar-day.blank {
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  background: none;
  border: 0;
}

.my-calendar-day.selected {
  outline: 2px solid var(--accent);
}

.my-calendar-day.today .my-calendar-date {
  background: var(--accent);
  color: #fff;
}

.my-calendar-date {
  width: 25px;
  height: 25px;
  color: inherit;
  border-radius: 50%;
  place-items: center;
  font-weight: 800;
  text-decoration: none;
  display: grid;
}

.my-calendar-events {
  flex-direction: column;
  gap: 3px;
  margin-top: 5px;
  display: flex;
}

.my-calendar-event {
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid #0000;
  border-radius: 6px;
  padding: 3px 5px;
  font-size: 9px;
  text-decoration: none;
  display: block;
  overflow: hidden;
}

.my-calendar-event.progress, .my-calendar-detail.progress, .my-calendar-legend .progress {
  color: #0369a1;
  background: #e0f2fe;
  border-color: #7dd3fc;
}

.my-calendar-event.todo, .my-calendar-detail.todo {
  color: #be123c;
  background: #fff1f2;
  border-color: #fda4af;
}

.my-calendar-event.review, .my-calendar-detail.review, .my-calendar-legend .review {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}

.my-calendar-event.training, .my-calendar-detail.training, .my-calendar-legend .training {
  color: #7e22ce;
  background: #f3e8ff;
  border-color: #d8b4fe;
}

.my-calendar-detail {
  color: inherit;
  border-left: 5px solid;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  display: flex;
}

.my-calendar-detail div {
  min-width: 0;
}

.my-calendar-detail small {
  font-weight: 800;
}

.my-calendar-detail strong {
  margin: 4px 0;
  display: block;
}

.my-calendar-detail p {
  color: inherit;
  opacity: .8;
  margin: 0;
}

.my-calendar-detail > span {
  white-space: nowrap;
  font-weight: 700;
}

@media (max-width: 640px) {
  .my-calendar-day {
    min-height: 64px;
    padding: 4px;
  }

  .my-calendar-events {
    display: none;
  }

  .my-calendar-legend {
    gap: 4px;
  }

  .my-calendar-legend span {
    padding: 4px 6px;
    font-size: 9px;
  }
}

.crm-calendar-view-switch {
  gap: 8px;
  margin-bottom: 14px;
  display: flex;
}

.crm-calendar-view-switch .button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.crm-calendar-day-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.crm-calendar-day-head small {
  color: var(--muted);
  font-size: 11px;
}

.crm-day-timeline {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.crm-day-slot {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  display: grid;
}

.crm-day-slot.selected {
  outline: 2px solid var(--accent);
  background: color-mix(in srgb,var(--accent) 4%,var(--card));
}

.crm-day-slot-time {
  border: 1px dashed var(--border);
  color: inherit;
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 84px;
  padding: 12px;
  text-decoration: none;
  display: flex;
}

.crm-day-slot-time span {
  font-size: 18px;
  font-weight: 800;
}

.crm-day-slot-time small {
  color: var(--accent);
  margin-top: 4px;
  font-weight: 700;
}

.crm-day-slot-content {
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  display: flex;
}

.crm-day-event {
  border: 1px solid #0000;
  border-radius: 12px;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  display: flex;
}

.crm-day-event p, .crm-day-event small {
  color: inherit;
  opacity: .8;
  margin: 0;
}

.crm-day-event strong {
  margin-bottom: 4px;
  display: block;
}

.crm-day-event.scheduled {
  color: #1d4ed8;
  background: #dbeafe;
  border-color: #93c5fd;
}

.crm-day-event.overdue {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fca5a5;
}

.crm-day-event.completed {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}

.crm-day-event.cancelled {
  color: #6b7280;
  background: #f3f4f6;
  border-color: #d1d5db;
}

@media (max-width: 900px) {
  .crm-day-slot {
    grid-template-columns: 1fr;
  }

  .crm-day-slot-time {
    min-height: auto;
  }
}

.crm-timeline-wrap {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 16px;
  overflow: auto;
}

.crm-timeline-help {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb,var(--accent) 4%,var(--card));
  z-index: 4;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 11px;
  display: flex;
  position: sticky;
  left: 0;
}

.crm-timeline-help strong {
  color: var(--accent);
}

.crm-timeline {
  align-items: stretch;
  min-width: 100%;
  display: grid;
}

.crm-timeline.week {
  min-width: 1180px;
}

.crm-timeline.day {
  min-width: 540px;
}

.crm-timeline-corner, .crm-timeline-dayhead {
  z-index: 3;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  text-align: center;
  padding: 10px;
  font-weight: 800;
  position: sticky;
  top: 0;
}

.crm-timeline-corner {
  z-index: 5;
  left: 0;
}

.crm-timeline-time {
  z-index: 2;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--card);
  text-align: center;
  font-variant-numeric: tabular-nums;
  padding: 10px 8px;
  font-weight: 800;
  position: sticky;
  left: 0;
}

.crm-timeline-cell {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb,var(--card) 96%,transparent);
  min-height: 58px;
  padding: 4px;
  transition: all .12s;
}

.crm-timeline-cell.drop-ready:hover {
  background: color-mix(in srgb,var(--accent) 9%,var(--card));
  outline: 2px dashed color-mix(in srgb,var(--accent) 55%,transparent);
  outline-offset: -3px;
}

.crm-timeline-event {
  border: 1px solid #0000;
  border-radius: 9px;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 3px;
  padding: 6px 7px;
  font-size: 10px;
  line-height: 1.25;
  display: flex;
}

.crm-timeline-event strong {
  font-size: 11px;
}

.crm-timeline-event span, .crm-timeline-event small {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.crm-timeline-event.draggable {
  cursor: grab;
}

.crm-timeline-event.draggable:active {
  cursor: grabbing;
}

.crm-timeline-event.locked {
  cursor: not-allowed;
}

.crm-timeline-event.scheduled {
  color: #1d4ed8;
  background: #dbeafe;
  border-color: #93c5fd;
}

.crm-timeline-event.overdue {
  color: #b91c1c;
  background: #fee2e2;
  border-color: #fca5a5;
}

.crm-timeline-event.completed {
  color: #166534;
  background: #dcfce7;
  border-color: #86efac;
}

.crm-timeline-event.cancelled {
  color: #6b7280;
  background: #f3f4f6;
  border-color: #d1d5db;
  text-decoration: line-through;
}

@media (max-width: 900px) {
  .crm-calendar-view-switch {
    white-space: nowrap;
    overflow: auto;
  }

  .crm-timeline-help {
    flex-direction: column;
    align-items: flex-start;
  }

  .crm-timeline.day {
    min-width: 480px;
  }
}

.crm-calendar-day.blank, .my-calendar-day.blank {
  box-shadow: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: none !important;
  border: 0 !important;
  outline: 0 !important;
}

.crm-copy-day-panel {
  border: 1px solid var(--border);
  background: color-mix(in srgb,var(--accent) 3%,var(--card));
  border-radius: 14px;
  margin: 0 0 14px;
  padding: 10px 12px;
}

.crm-copy-day-panel summary {
  cursor: pointer;
  font-weight: 800;
}

.crm-copy-day-form {
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 12px;
  display: grid;
}

.crm-copy-day-form label {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.crm-copy-day-form > span {
  padding-bottom: 12px;
  font-weight: 800;
}

.crm-copy-result {
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 9px 12px;
}

.my-calendar-event.leave, .my-calendar-detail.leave, .my-calendar-legend .leave {
  color: #9d174d;
  background: #fce7f3;
  border-color: #f9a8d4;
}

.my-calendar-event.business-trip, .my-calendar-detail.business-trip, .my-calendar-legend .business-trip {
  color: #3730a3;
  background: #e0e7ff;
  border-color: #a5b4fc;
}

.my-calendar-event.company-holiday, .my-calendar-detail.company-holiday, .my-calendar-legend .company-holiday {
  color: #9a3412;
  background: #ffedd5;
  border-color: #fdba74;
}

@media (max-width: 800px) {
  .crm-copy-day-form {
    grid-template-columns: 1fr 1fr;
  }

  .crm-copy-day-form > span {
    display: none;
  }

  .crm-copy-day-form .button {
    grid-column: 1 / -1;
  }
}

.work-calendar-panel {
  margin-top: 4px;
}

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

.work-section-head small {
  letter-spacing: .08em;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.work-section-head h2 {
  margin: 4px 0 2px;
}

.work-section-head p {
  margin: 0;
}

.work-agenda-list, .work-task-list {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.work-agenda-item {
  color: inherit;
  border-left: 5px solid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  display: grid;
}

.work-agenda-item > div:nth-child(2) {
  min-width: 0;
}

.work-agenda-item small {
  font-weight: 800;
}

.work-agenda-item strong {
  margin: 3px 0;
  display: block;
}

.work-agenda-item p {
  color: inherit;
  opacity: .75;
  margin: 0;
}

.work-agenda-date {
  border-right: 1px solid var(--border);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-right: 10px;
  display: flex;
}

.work-agenda-date strong {
  font-size: 22px;
  line-height: 1;
}

.work-agenda-date span {
  color: var(--muted);
  font-size: 10px;
}

.work-agenda-date small {
  margin-top: 4px;
}

.work-agenda-status {
  white-space: nowrap;
  font-weight: 700;
}

.work-agenda-item.crm {
  color: #1d4ed8;
  background: #eff6ff;
}

.work-agenda-item.leave {
  color: #be185d;
  background: #fdf2f8;
}

.work-agenda-item.company-holiday {
  color: #c2410c;
  background: #fff7ed;
}

.work-agenda-item.progress {
  color: #0369a1;
  background: #f0f9ff;
}

.work-agenda-item.review {
  color: #92400e;
  background: #fffbeb;
}

.work-agenda-item.todo {
  background: var(--card);
  color: inherit;
}

.work-agenda-item.overdue {
  color: #b91c1c;
  background: #fef2f2;
}

.work-task-row {
  color: inherit;
  border-left: 5px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  display: flex;
}

.work-task-row div {
  min-width: 0;
}

.work-task-row small {
  color: var(--muted);
  font-weight: 700;
}

.work-task-row strong {
  margin: 4px 0;
  display: block;
}

.work-task-row p {
  color: var(--muted);
  margin: 0;
}

.work-task-row > span {
  white-space: nowrap;
  font-weight: 700;
}

.work-task-row.in_progress {
  border-left-color: #38bdf8;
}

.work-task-row.review {
  border-left-color: #f59e0b;
}

.work-task-row.overdue {
  color: #991b1b;
  background: #fef2f2;
  border-left-color: #ef4444;
}

.work-task-row.overdue p {
  color: #b91c1c;
}

@media (max-width: 640px) {
  .work-section-head {
    flex-direction: column;
    align-items: stretch;
  }

  .work-agenda-item {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .work-agenda-status {
    grid-column: 2;
  }

  .work-task-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .work-task-row > span {
    align-self: flex-end;
  }
}

.crm-recurrence-box {
  border: 1px solid var(--border);
  background: color-mix(in srgb,var(--accent) 4%,var(--card));
  border-radius: 14px;
  gap: 10px;
  padding: 14px;
  display: grid;
}

.crm-recurrence-box > div > strong {
  font-size: 13px;
}

.crm-recurrence-box p {
  margin: 3px 0 0;
}

.crm-recurrence-weekdays {
  border: 0;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  display: flex;
}

.crm-recurrence-weekdays legend {
  margin-bottom: 6px;
  font-weight: 700;
}

.crm-recurrence-weekdays label {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  display: inline-flex;
}

.crm-recurring-badge {
  color: #6d28d9;
  background: #ede9fe;
  border-radius: 999px;
  align-items: center;
  margin-left: 6px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 800;
  display: inline-flex;
}

.report-module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.report-module-card {
  color: inherit;
  min-height: 160px;
  text-decoration: none;
  transition: all .18s;
}

.report-module-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px #0f172a14;
}

.report-module-code {
  color: #197c78;
  letter-spacing: .04em;
  background: #edf7f5;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

.report-module-card h3 {
  margin: 14px 0 6px;
  font-size: 18px;
}

.report-module-card p {
  color: var(--muted);
  line-height: 1.55;
}

.report-open {
  margin-top: 16px;
  font-weight: 800;
  display: block;
}

.report-scope-note {
  border-left: 4px solid var(--accent);
}

.report-scope-note p {
  color: var(--muted);
  margin-bottom: 0;
}

.report-filter-bar {
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  display: flex;
}

.report-filter-form {
  align-items: end;
  gap: 12px;
  display: flex;
}

.report-filter-form label {
  min-width: 160px;
}

.report-scope-pill {
  background: #f3f8f8;
  border-radius: 12px;
  padding: 10px 14px;
}

.report-scope-pill small, .report-scope-pill strong {
  display: block;
}

.report-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.report-metric small {
  color: var(--muted);
  text-transform: uppercase;
  font-weight: 700;
  display: block;
}

.report-metric strong {
  margin-top: 8px;
  font-size: 24px;
  display: block;
}

.report-breakdown-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  display: grid;
}

.report-bar-list {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.report-bar-row > div:first-child {
  justify-content: space-between;
  gap: 12px;
  display: flex;
}

.report-bar-track {
  background: #edf2f2;
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
}

.report-bar-track i {
  background: var(--accent);
  border-radius: inherit;
  height: 100%;
  display: block;
}

.crm-report-model {
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 18px;
  display: grid;
}

.crm-report-model span {
  text-align: center;
  background: #f2faf8;
  border-radius: 12px;
  padding: 12px 8px;
  font-weight: 800;
}

.report-table {
  max-height: 620px;
}

.report-table thead th {
  background: var(--card);
  z-index: 1;
  position: sticky;
  top: 0;
}

.report-mobile-filter {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  display: grid;
}

.report-mobile-row {
  border-bottom: 1px solid var(--border);
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px 0;
  display: grid;
}

.report-mobile-row small {
  color: var(--muted);
  display: block;
}

.report-mobile-row span {
  font-weight: 700;
  display: block;
}

@media (max-width: 1100px) {
  .report-module-grid, .report-metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .crm-report-model {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 700px) {
  .report-module-grid, .report-breakdown-grid, .report-metric-grid {
    grid-template-columns: 1fr;
  }

  .report-filter-bar, .report-filter-form {
    grid-template-columns: 1fr;
    width: 100%;
    display: grid;
  }

  .crm-report-model {
    grid-template-columns: repeat(2, 1fr);
  }
}

.group-overview-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 16px;
  display: grid;
}

.group-holding-card {
  background: linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--card)),var(--card));
}

.group-bu-form {
  border: 1px solid var(--border);
  background: color-mix(in srgb,var(--accent) 2%,var(--card));
  border-radius: 16px;
  gap: 14px;
  margin-bottom: 16px;
  padding: 16px;
  display: grid;
}

.group-bu-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  display: grid;
}

.group-bu-cards article h3 {
  margin: 8px 0;
}

.group-bu-cards details {
  margin-top: 10px;
}

@media (max-width: 900px) {
  .group-overview-grid, .group-bu-cards {
    grid-template-columns: 1fr;
  }
}

.topbar-left {
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.topbar-left .global-search {
  flex: 1;
  min-width: 260px;
  max-width: 520px;
}

.bu-switcher {
  border: 1px solid var(--border, #e5e7eb);
  background: var(--card, #fff);
  white-space: nowrap;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  display: flex;
}

.bu-switcher-label {
  color: var(--muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
  font-weight: 800;
}

.bu-switcher select {
  background: none;
  border: 0;
  outline: none;
  min-width: 180px;
  padding: 4px 24px 4px 4px;
  font-weight: 700;
}

.bu-scope-banner {
  background: color-mix(in srgb,var(--accent) 8%,var(--card));
  border: 1px solid color-mix(in srgb,var(--accent) 20%,var(--border));
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 8px 12px;
  font-size: 11px;
  display: flex;
}

.bu-scope-banner strong {
  color: var(--accent);
}

@media (max-width: 1100px) {
  .bu-switcher-label {
    display: none;
  }

  .bu-switcher select {
    min-width: 130px;
  }

  .topbar-left .global-search {
    min-width: 180px;
  }
}

@media (max-width: 800px) {
  .topbar-left {
    width: 100%;
  }

  .bu-switcher {
    display: none;
  }
}

.workflow-condition-box {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  margin-top: 12px;
  padding: 12px;
}

.workflow-condition-box .workflow-steps-head {
  margin-bottom: 8px;
}

.workflow-editor-redesign {
  overflow: visible;
}

.workflow-settings-disclosure {
  background: #fbfcfc;
  border: 1px solid #e3eaeb;
  border-radius: 14px;
  margin: 18px 24px 0;
  overflow: hidden;
}

.workflow-settings-disclosure > summary {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  font-weight: 800;
  list-style: none;
  display: flex;
}

.workflow-settings-disclosure > summary span {
  color: #738287;
  font-size: 12px;
  font-weight: 400;
}

.workflow-settings-disclosure[open] > summary {
  border-bottom: 1px solid #e8edef;
}

.workflow-settings-disclosure .workflow-core-form {
  padding: 16px;
}

.workflow-steps-head-redesign {
  padding: 22px 24px 12px;
}

.workflow-steps-head-redesign p {
  color: #75858a;
  margin: 5px 0 0;
  font-size: 12px;
}

.workflow-count-badge {
  color: #177e7a;
  background: #eef8f7;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
}

.workflow-step-list-redesign {
  gap: 16px;
}

.workflow-step-card-redesign {
  background: #fff;
  border-radius: 18px;
  padding: 0;
  display: block;
  overflow: hidden;
  box-shadow: 0 8px 24px #21494d0b;
}

.workflow-step-topbar {
  background: linear-gradient(#fbfdfd, #f8fbfb);
  border-bottom: 1px solid #edf1f2;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 16px 18px;
  display: flex;
}

.workflow-step-identity {
  align-items: flex-start;
  gap: 12px;
  display: flex;
}

.workflow-step-identity h4 {
  margin: 2px 0 6px;
  font-size: 15px;
}

.workflow-step-chips {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.workflow-step-chips span {
  color: #53666b;
  background: #f1f5f5;
  border-radius: 999px;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
}

.workflow-step-chips span.always {
  color: #287756;
  background: #eaf8f1;
}

.workflow-step-chips span.conditional {
  color: #8a6015;
  background: #fff4df;
}

.workflow-save-step {
  white-space: nowrap;
  width: auto !important;
}

.workflow-step-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 16px;
  padding: 16px 18px 18px;
  display: grid;
}

.workflow-config-block, .workflow-rule-builder {
  background: #fbfcfc;
  border: 1px solid #e4eaeb;
  border-radius: 14px;
  margin: 0;
  padding: 15px;
}

.workflow-block-heading {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  display: flex;
}

.workflow-block-heading h4 {
  margin: 3px 0 0;
  font-size: 13px;
}

.workflow-step-name {
  gap: 6px;
  margin-bottom: 12px;
  display: grid;
}

.workflow-rule-builder.is-always {
  background: #f8fcfa;
  border-color: #dfeee7;
}

.workflow-rule-builder.is-active {
  background: #fffdfa;
  border-color: #eee4cf;
}

.workflow-rule-badge {
  white-space: nowrap;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 800;
}

.workflow-rule-badge.always {
  color: #287756;
  background: #e7f7ef;
}

.workflow-rule-badge.condition {
  color: #8b6215;
  background: #fff1d6;
}

.workflow-rule-row {
  grid-template-columns: auto minmax(150px, 1.6fr) minmax(76px, .55fr) minmax(100px, .75fr);
  align-items: end;
  gap: 9px;
  display: grid;
}

.workflow-rule-if {
  color: #47585d;
  align-items: center;
  height: 42px;
  padding: 0 2px;
  font-weight: 900;
  display: flex;
}

.workflow-rule-row label {
  gap: 5px;
  display: grid;
}

.workflow-rule-row label > span {
  color: #718187;
  font-size: 10.5px;
  font-weight: 700;
}

.workflow-rule-empty {
  color: #5c7469;
  background: #eef7f2;
  border-radius: 10px;
  grid-column: 3 / -1;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  font-size: 11px;
  display: flex;
}

.workflow-rule-summary {
  color: #75531d;
  background: #fff7e8;
  border-radius: 10px;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 9px 11px;
  font-size: 11px;
  display: flex;
}

.workflow-rule-summary > span {
  font-weight: 700;
}

.workflow-rule-summary small {
  color: #8a7655;
  width: 100%;
}

.workflow-approver-box .two-col {
  gap: 9px;
}

.workflow-resolve-preview {
  background: #fff;
  border-color: #e1e8e9;
  padding: 10px 12px;
}

.workflow-resolve-preview p {
  font-size: 11px;
}

.workflow-new-step-redesign {
  background: #fff;
  border-style: solid;
  padding: 0;
  overflow: hidden;
}

.workflow-new-step-redesign > summary {
  cursor: pointer;
  color: #177e7a;
  background: #f5fbfa;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  font-weight: 900;
  list-style: none;
  display: flex;
}

.workflow-new-step-redesign > summary small {
  color: #76868a;
  font-weight: 400;
}

.workflow-new-step-redesign[open] > summary {
  border-bottom: 1px solid #e5ecec;
}

.workflow-new-step-form {
  gap: 14px;
  padding: 16px;
  display: grid;
}

@media (max-width: 1150px) {
  .workflow-step-grid {
    grid-template-columns: 1fr;
  }

  .workflow-rule-row {
    grid-template-columns: auto 1.5fr .6fr .8fr;
  }
}

@media (max-width: 760px) {
  .workflow-settings-disclosure {
    margin-left: 16px;
    margin-right: 16px;
  }

  .workflow-step-topbar {
    display: block;
  }

  .workflow-save-step {
    margin-top: 12px;
    width: 100% !important;
  }

  .workflow-step-grid {
    padding: 14px;
  }

  .workflow-rule-row {
    grid-template-columns: 1fr;
  }

  .workflow-rule-if {
    height: auto;
  }

  .workflow-rule-empty {
    grid-column: auto;
  }

  .workflow-settings-disclosure > summary, .workflow-new-step-redesign > summary {
    flex-direction: column;
    align-items: flex-start;
  }

  .workflow-step-chips {
    margin-top: 6px;
  }
}

.workflow-step-card-redesign .workflow-step-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.workflow-step-card-redesign .workflow-config-block {
  grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: 12px 18px;
  display: grid;
}

.workflow-step-card-redesign .workflow-config-block > .workflow-block-heading {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.workflow-step-card-redesign .workflow-config-block > .workflow-step-name {
  grid-column: 1;
  margin-bottom: 0;
}

.workflow-step-card-redesign .workflow-config-block > .workflow-approver-box {
  grid-area: 2 / 2 / span 2;
  min-width: 0;
}

.workflow-step-card-redesign .workflow-approver-box .two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.workflow-step-card-redesign .workflow-approver-box label, .workflow-step-card-redesign .workflow-step-name {
  min-width: 0;
}

.workflow-step-card-redesign .workflow-approver-box select, .workflow-step-card-redesign .workflow-approver-box input, .workflow-step-card-redesign .workflow-step-name input {
  width: 100%;
  min-width: 0;
}

.workflow-step-card-redesign .workflow-resolve-preview {
  box-sizing: border-box;
  width: 100%;
}

.workflow-step-card-redesign .workflow-rule-builder {
  min-width: 0;
}

.workflow-step-card-redesign .workflow-rule-row {
  grid-template-columns: 42px minmax(220px, 1.6fr) minmax(100px, .55fr) minmax(120px, .7fr);
  align-items: end;
  gap: 12px;
}

.workflow-step-card-redesign .workflow-rule-builder.is-always .workflow-rule-row {
  grid-template-columns: 42px minmax(220px, 360px) minmax(0, 1fr);
}

.workflow-step-card-redesign .workflow-rule-builder.is-always .workflow-rule-empty {
  white-space: normal;
  grid-column: auto;
  min-width: 0;
  min-height: 42px;
}

.workflow-step-card-redesign .workflow-rule-row select, .workflow-step-card-redesign .workflow-rule-row input {
  width: 100%;
  min-width: 0;
}

.workflow-step-card-redesign .workflow-rule-empty, .workflow-step-card-redesign .workflow-rule-summary {
  box-sizing: border-box;
  overflow-wrap: anywhere;
  max-width: 100%;
}

@media (max-width: 980px) {
  .workflow-step-card-redesign .workflow-config-block {
    grid-template-columns: 1fr;
  }

  .workflow-step-card-redesign .workflow-config-block > .workflow-block-heading, .workflow-step-card-redesign .workflow-config-block > .workflow-step-name, .workflow-step-card-redesign .workflow-config-block > .workflow-approver-box {
    grid-area: auto / 1;
  }

  .workflow-step-card-redesign .workflow-rule-row, .workflow-step-card-redesign .workflow-rule-builder.is-always .workflow-rule-row {
    grid-template-columns: 1fr;
  }

  .workflow-step-card-redesign .workflow-rule-if {
    height: auto;
  }
}

.loyalty-automation-builder {
  padding: 0;
  overflow: hidden;
  background: #f9fbfb !important;
  border-color: #dce7e8 !important;
}

.loyalty-builder-head {
  background: linear-gradient(135deg, #fff 0%, #fbfefe 68%, #f0fbfa 100%);
  border-bottom: 1px solid #e4edee;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 30px 22px;
  display: flex;
}

.loyalty-builder-head h2 {
  letter-spacing: -.025em;
  color: #182f34;
  margin: 10px 0 7px;
  font-size: 25px;
  line-height: 1.2;
}

.loyalty-builder-head p {
  max-width: 980px;
  margin: 0;
  line-height: 1.55;
}

.loyalty-builder-kicker {
  color: #168983;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #e7f7f5;
  border-radius: 999px;
  align-items: center;
  padding: 6px 11px;
  font-size: 11px;
  font-weight: 850;
  display: inline-flex;
}

.loyalty-builder-guide {
  color: #6f7f83;
  background: #ffffffd9;
  border: 1px solid #dce8e9;
  border-radius: 10px;
  flex: none;
  margin-top: 2px;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 700;
}

.loyalty-builder-form {
  background: #f7f9fa;
  padding: 18px;
}

.loyalty-builder-columns {
  grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr);
  align-items: start;
  gap: 16px;
  display: grid;
}

.loyalty-builder-left {
  gap: 16px;
  display: grid;
}

.loyalty-builder-panel {
  background: #fff;
  border: 1px solid #dfe8e9;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 4px 16px #21484c09;
}

.loyalty-panel-title {
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 18px;
  display: flex;
}

.loyalty-panel-title h3 {
  color: #203d42;
  letter-spacing: -.01em;
  margin: 0 0 3px;
  font-size: 15px;
}

.loyalty-panel-title p {
  color: #819095;
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
}

.loyalty-panel-icon {
  color: #168983;
  letter-spacing: .03em;
  background: #e8f7f6;
  border-radius: 9px;
  flex: 0 0 30px;
  place-items: center;
  width: 30px;
  height: 30px;
  font-size: 10px;
  font-weight: 900;
  display: grid;
}

.loyalty-field-grid {
  gap: 14px;
  display: grid;
}

.loyalty-field-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.loyalty-field-grid.three {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(130px, .62fr);
}

.loyalty-field-grid label, .loyalty-action-fields label {
  color: #42595e;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  display: grid;
}

.loyalty-field-grid input, .loyalty-field-grid select, .loyalty-action-fields input, .loyalty-action-fields textarea {
  color: #203136;
  background: #fcfdfd;
  border: 1px solid #d9e3e5;
  border-radius: 10px;
  width: 100%;
  min-height: 43px;
  padding: 9px 11px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.loyalty-action-fields textarea {
  resize: vertical;
  min-height: 112px;
  line-height: 1.5;
}

.loyalty-field-grid input:focus, .loyalty-field-grid select:focus, .loyalty-action-fields input:focus, .loyalty-action-fields textarea:focus {
  background: #fff;
  border-color: #3db0aa;
  outline: 0;
  box-shadow: 0 0 0 3px #23a9a21c;
}

.loyalty-builder-date-row {
  max-width: 72%;
  margin-top: 14px;
}

.loyalty-builder-info {
  color: #688085;
  background: linear-gradient(90deg, #f1faf9, #f8fbfb);
  border: 1px solid #d7e9e8;
  border-radius: 11px;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 13px;
  display: flex;
}

.loyalty-builder-info > span {
  color: #168983;
  border: 1px solid #54aaa5;
  border-radius: 50%;
  flex: 0 0 20px;
  place-items: center;
  width: 20px;
  height: 20px;
  font-size: 11px;
  font-weight: 900;
  display: grid;
}

.loyalty-builder-info p {
  margin: 1px 0 0;
  font-size: 11px;
  line-height: 1.5;
}

.loyalty-builder-actions {
  min-height: 100%;
}

.loyalty-action-box {
  background: #fcfefe;
  border: 1px solid #dfe8ea;
  border-radius: 13px;
  padding: 16px;
}

.loyalty-action-box + .loyalty-action-box {
  margin-top: 14px;
}

.loyalty-action-box.email {
  background: linear-gradient(145deg, #fcfefe, #f7fbff);
  border-color: #dce7f0;
}

.loyalty-action-box.activity {
  background: linear-gradient(145deg, #fcfefe, #f5fbf8);
  border-color: #d9e9e1;
}

.loyalty-switch-row {
  cursor: pointer;
  justify-content: space-between;
  align-items: flex-start;
  color: #233e43 !important;
  gap: 18px !important;
  display: flex !important;
}

.loyalty-switch-row > span:first-child {
  gap: 3px;
  display: grid;
}

.loyalty-switch-row strong {
  font-size: 12px;
}

.loyalty-switch-row small {
  color: #87969a;
  font-weight: 500;
  line-height: 1.45;
}

.loyalty-switch {
  flex: 0 0 40px;
  width: 40px;
  height: 22px;
  display: inline-flex;
  position: relative;
}

.loyalty-switch input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.loyalty-switch > span {
  background: #cbd7d9;
  border-radius: 999px;
  transition: all .18s;
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px #0000000a;
}

.loyalty-switch > span:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: all .18s;
  position: absolute;
  top: 3px;
  left: 3px;
  box-shadow: 0 1px 3px #0000002e;
}

.loyalty-switch input:checked + span {
  background: #15968f;
}

.loyalty-switch input:checked + span:after {
  transform: translateX(18px);
}

.loyalty-action-fields {
  border-top: 1px solid #e6eded;
  gap: 13px;
  margin-top: 15px;
  padding-top: 14px;
  display: grid;
}

.loyalty-template-vars {
  color: #87969a;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  display: flex;
}

.loyalty-template-vars code {
  color: #37716e;
  background: #eef5f5;
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 10px;
}

.loyalty-builder-footer {
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 16px 2px 1px;
  display: flex;
}

.loyalty-save-button {
  min-width: 230px;
  box-shadow: 0 7px 18px #168f892e;
  background: linear-gradient(135deg, #168f89, #0faaa1) !important;
  border-color: #168f89 !important;
}

.loyalty-draft-button {
  min-width: 120px;
}

@media (max-width: 1100px) {
  .loyalty-builder-columns {
    grid-template-columns: 1fr;
  }

  .loyalty-builder-date-row {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .loyalty-builder-head {
    padding: 22px 18px;
    display: grid;
  }

  .loyalty-builder-guide {
    justify-self: start;
  }

  .loyalty-builder-form {
    padding: 12px;
  }

  .loyalty-builder-panel {
    padding: 16px;
  }

  .loyalty-field-grid.two, .loyalty-field-grid.three {
    grid-template-columns: 1fr;
  }

  .loyalty-builder-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .loyalty-save-button, .loyalty-draft-button {
    width: 100%;
    min-width: 0;
  }
}

.loyalty-rule-library {
  padding: 0;
  overflow: hidden;
  background: #f8fbfb !important;
  border-color: #dce7e8 !important;
}

.loyalty-rule-library-head {
  background: linear-gradient(135deg, #fff, #f6fbfb);
  border-bottom: 1px solid #e4edee;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 24px 26px 20px;
  display: flex;
}

.loyalty-rule-library-head h2 {
  color: #1d373c;
  letter-spacing: -.02em;
  margin: 9px 0 5px;
  font-size: 21px;
}

.loyalty-rule-library-head p {
  max-width: 840px;
  margin: 0;
  line-height: 1.5;
}

.loyalty-rule-count {
  color: #547175;
  background: #fff;
  border: 1px solid #d7e7e7;
  border-radius: 12px;
  place-items: center;
  min-width: 72px;
  padding: 10px 14px;
  display: grid;
}

.loyalty-rule-count strong {
  color: #168f89;
  font-size: 20px;
  line-height: 1;
}

.loyalty-rule-count span {
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
}

.loyalty-rule-list {
  gap: 12px;
  padding: 16px;
  display: grid;
}

.loyalty-rule-card {
  background: #fff;
  border: 1px solid #dfe8e9;
  border-radius: 15px;
  overflow: visible;
  box-shadow: 0 5px 18px #23484c09;
}

.loyalty-rule-main {
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 18px 20px 14px;
  display: flex;
}

.loyalty-rule-title {
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  display: flex;
}

.loyalty-rule-title h3 {
  color: #203b40;
  margin: 0 0 7px;
  font-size: 14px;
}

.loyalty-rule-status-dot {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  box-shadow: 0 0 0 4px #00000006;
}

.loyalty-rule-status-dot.on {
  background: #17a17d;
}

.loyalty-rule-status-dot.off {
  background: #a8b4b6;
}

.loyalty-rule-badges {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.loyalty-rule-badges span {
  color: #607a7e;
  letter-spacing: .02em;
  background: #eef6f6;
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 800;
}

.loyalty-rule-stat {
  text-align: right;
  flex: none;
}

.loyalty-rule-stat span {
  color: #879599;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 9px;
  font-weight: 800;
  display: block;
}

.loyalty-rule-stat strong {
  color: #5e7074;
  margin-top: 4px;
  font-size: 15px;
  display: block;
}

.loyalty-rule-stat strong.positive {
  color: #138a69;
}

.loyalty-rule-grid {
  background: #fbfcfc;
  border-top: 1px solid #edf2f2;
  border-bottom: 1px solid #edf2f2;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  display: grid;
}

.loyalty-rule-grid > div {
  border-right: 1px solid #edf2f2;
  align-content: start;
  gap: 3px;
  min-height: 76px;
  padding: 13px 16px;
  display: grid;
}

.loyalty-rule-grid > div:last-child {
  border-right: 0;
}

.loyalty-rule-grid .label {
  color: #8b989b;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: 9px;
  font-weight: 850;
}

.loyalty-rule-grid strong {
  color: #314a4e;
  font-size: 11px;
}

.loyalty-rule-grid small {
  color: #829194;
  font-size: 10px;
  line-height: 1.4;
}

.loyalty-rule-grid .status-on {
  color: #148665;
}

.loyalty-rule-grid .status-off {
  color: #8b9698;
}

.loyalty-rule-footer {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  display: flex;
}

.loyalty-rule-test-form {
  align-items: center;
  gap: 8px;
  display: flex;
}

.loyalty-rule-test-form select {
  color: #344c50;
  background: #fff;
  border: 1px solid #dbe5e6;
  border-radius: 9px;
  min-width: 220px;
  min-height: 35px;
  padding: 6px 10px;
}

.loyalty-rule-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  display: flex;
}

.loyalty-rule-delete {
  color: #a84f4f !important;
  background: snow !important;
  border-color: #ead7d7 !important;
}

.loyalty-rule-edit {
  position: relative;
}

.loyalty-rule-edit > summary {
  cursor: pointer;
  color: #38575b;
  background: #fff;
  border: 1px solid #dce5e6;
  border-radius: 9px;
  align-items: center;
  min-height: 32px;
  padding: 5px 11px;
  font-size: 10px;
  font-weight: 800;
  list-style: none;
  display: inline-flex;
}

.loyalty-rule-edit > summary::-webkit-details-marker {
  display: none;
}

.loyalty-rule-edit[open] > summary {
  border-color: #8ac7c3;
  box-shadow: 0 0 0 3px #168f8914;
}

.loyalty-rule-edit-form {
  z-index: 20;
  background: #fff;
  border: 1px solid #d7e4e5;
  border-radius: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: min(720px, 82vw);
  padding: 16px;
  display: grid;
  position: absolute;
  top: 40px;
  right: 0;
  box-shadow: 0 18px 50px #1c383c2e;
}

.loyalty-rule-edit-form label {
  color: #4c6266;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  display: grid;
}

.loyalty-rule-edit-form input, .loyalty-rule-edit-form select, .loyalty-rule-edit-form textarea {
  background: #fcfdfd;
  border: 1px solid #dbe4e5;
  border-radius: 9px;
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
}

.loyalty-rule-edit-form textarea {
  resize: vertical;
}

.loyalty-rule-edit-form .wide {
  grid-column: 1 / -1;
}

.loyalty-rule-edit-form .check-line {
  align-self: end;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  display: flex;
}

.loyalty-rule-edit-form .check-line input {
  width: 15px;
  min-height: 15px;
}

.loyalty-rule-edit-buttons {
  justify-content: flex-end;
  display: flex;
}

@media (max-width: 1100px) {
  .loyalty-rule-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .loyalty-rule-grid > div:nth-child(2) {
    border-right: 0;
  }

  .loyalty-rule-grid > div:nth-child(-n+2) {
    border-bottom: 1px solid #edf2f2;
  }

  .loyalty-rule-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .loyalty-rule-actions {
    justify-content: flex-start;
  }

  .loyalty-rule-edit-form {
    left: 0;
    right: auto;
  }
}

@media (max-width: 700px) {
  .loyalty-rule-library-head {
    padding: 20px 16px;
  }

  .loyalty-rule-count {
    display: none;
  }

  .loyalty-rule-list {
    padding: 10px;
  }

  .loyalty-rule-main {
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
  }

  .loyalty-rule-stat {
    text-align: left;
  }

  .loyalty-rule-grid {
    grid-template-columns: 1fr;
  }

  .loyalty-rule-grid > div {
    border-bottom: 1px solid #edf2f2;
    border-right: 0 !important;
  }

  .loyalty-rule-grid > div:last-child {
    border-bottom: 0;
  }

  .loyalty-rule-test-form {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .loyalty-rule-test-form select {
    width: 100%;
    min-width: 0;
  }

  .loyalty-rule-actions {
    width: 100%;
  }

  .loyalty-rule-edit-form {
    grid-template-columns: 1fr;
    width: auto;
    max-height: 78vh;
    position: fixed;
    top: 76px;
    left: 12px;
    right: 12px;
    overflow: auto;
  }

  .loyalty-rule-edit-form .wide {
    grid-column: auto;
  }
}

.loyalty-edit-page {
  gap: 18px;
  display: grid;
}

.loyalty-edit-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 4px 2px;
  display: flex;
}

.loyalty-edit-header h1 {
  margin: 8px 0 6px;
  font-size: 24px;
  line-height: 1.2;
}

.loyalty-edit-header p {
  max-width: 820px;
  margin: 0;
}

.loyalty-edit-form {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  display: grid;
}

.loyalty-edit-form > .loyalty-builder-panel:first-child, .loyalty-edit-form > .loyalty-builder-actions {
  grid-column: 1 / -1;
}

.loyalty-edit-actions {
  background: #fff;
  border: 1px solid #e1e9ea;
  border-radius: 14px;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px;
  display: flex;
}

.loyalty-edit-actions .loyalty-save-button {
  min-width: 180px;
}

@media (max-width: 900px) {
  .loyalty-edit-header {
    flex-direction: column;
  }

  .loyalty-edit-form {
    grid-template-columns: 1fr;
  }

  .loyalty-edit-form > .loyalty-builder-panel, .loyalty-edit-form > .loyalty-builder-actions {
    grid-column: auto;
  }

  .loyalty-edit-actions {
    z-index: 5;
    position: sticky;
    bottom: 8px;
  }
}

/*# sourceMappingURL=src_app_globals_162hn9o.css.map*/