@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&display=swap");

:root {
  --bs-primary: #696cff;
  --bs-primary-rgb: 105, 108, 255;
  --bs-body-bg: #f5f5f9;
  --bs-body-color: #646e78;
  --bs-heading-color: #384551;
  --bs-paper-bg: #fff;
  --bs-border-color: #e4e6e8;
  --menu-width: 16.25rem;
  --navbar-height: 3.875rem;
  --card-shadow: 0 0.25rem 1.125rem rgba(75, 70, 92, 0.1);
  --font: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html, body { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--bs-primary); text-decoration: none; }
a:hover { color: #5f61e6; }

.text-heading { color: var(--bs-heading-color) !important; }
.text-body { color: var(--bs-body-color) !important; }

.bg-label-primary { background: #e7e7ff; color: #696cff; }
.bg-label-success { background: #e8fadf; color: #71dd37; }
.bg-label-warning { background: #fff2d6; color: #ffab00; }
.bg-label-info { background: #d7f5fc; color: #03c3ec; }
.bg-label-danger { background: #ffe0db; color: #ff3e1d; }

/* —— Layout (Sneat) —— */
.layout-wrapper {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  min-height: 100vh;
  width: 100%;
}

.layout-menu {
  width: var(--menu-width);
  flex: 0 0 var(--menu-width);
  background: var(--bs-paper-bg);
  box-shadow: 0 0.125rem 0.375rem 0 rgba(34, 48, 62, 0.08);
  z-index: 1030;
  display: flex;
  flex-direction: column;
}

@media (min-width: 992px) {
  .layout-menu.offcanvas-lg {
    position: sticky;
    top: 0;
    height: 100vh;
    transform: none !important;
    visibility: visible !important;
    border-right: 0;
  }
}

.app-brand {
  display: flex;
  align-items: center;
  padding: 1.15rem 1.25rem 0.85rem;
  flex: none;
}

.app-brand-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--bs-heading-color);
}

.app-brand-link:hover { color: var(--bs-heading-color); }

.app-brand-logo {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  display: grid;
  place-items: center;
  background: var(--bs-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 0.125rem 0.25rem rgba(105, 108, 255, 0.4);
}

.app-brand-text {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}

.menu-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 0.75rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 110, 120, 0.3) transparent;
}

.menu-inner {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.menu-header {
  list-style: none;
  margin: 1rem 0 0.35rem;
  padding: 0.35rem 0.95rem 0.25rem;
  color: #a7acb2;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  line-height: 1;
}

.menu-item { list-style: none; }

.menu-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  padding: 0.5rem 0.95rem;
  border-radius: 0.375rem;
  color: #697a8d;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.375rem;
  transition: color 0.2s, background-color 0.2s;
}

.menu-link:hover {
  color: #697a8d;
  background: rgba(34, 48, 62, 0.04);
}

.menu-icon {
  font-size: 1.25rem;
  flex: 0 0 auto;
  width: 1.375rem;
  text-align: center;
  opacity: 0.9;
}

.menu-item.active > .menu-link {
  background: linear-gradient(72.47deg, #696cff 22.16%, rgba(105, 108, 255, 0.7) 76.47%);
  box-shadow: 0 0.125rem 0.375rem 0 rgba(105, 108, 255, 0.3);
  color: #fff !important;
  font-weight: 500;
}

.menu-item.active > .menu-link .menu-icon { opacity: 1; }

.menu-group > .menu-details {
  margin: 0;
  display: block;
}

.menu-toggle {
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: inherit;
}

.menu-toggle::-webkit-details-marker,
.menu-toggle::marker {
  display: none;
  content: "";
}

.menu-caret {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.menu-details[open] > .menu-toggle .menu-caret {
  transform: rotate(180deg);
}

.menu-group.open > .menu-details > .menu-toggle,
.menu-details[open] > .menu-toggle {
  color: var(--bs-heading-color);
  font-weight: 500;
}

.menu-sub {
  list-style: none;
  margin: 0.125rem 0 0.35rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.menu-sub .menu-link {
  padding-left: 2.45rem;
  font-size: 0.875rem;
}

.menu-sub .menu-sub .menu-link {
  padding-left: 3.15rem;
}

.menu-sub .menu-icon {
  font-size: 1.05rem;
  width: 1.15rem;
}

.layout-page {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.layout-navbar {
  height: var(--navbar-height);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(200%) blur(6px);
  box-shadow: 0 0 0.375rem 0 rgba(34, 48, 62, 0.08);
  position: sticky;
  top: 0;
  z-index: 1020;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
}

.navbar-nav-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.navbar-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #697a8d;
  min-width: 12rem;
}

.navbar-search i { font-size: 1.15rem; opacity: 0.8; }

.navbar-search input {
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--bs-heading-color);
  font: inherit;
  width: 14rem;
  padding: 0.25rem 0;
}

.navbar-search input::placeholder { color: #a1acb8; }

.navbar-spacer { flex: 1; }

.navbar-host {
  color: #a1acb8;
  font-size: 0.8125rem;
  max-width: 28vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-icon {
  width: 2.375rem;
  height: 2.375rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #697a8d;
  border-radius: 50%;
}

.btn-icon:hover { background: rgba(34, 48, 62, 0.06); color: var(--bs-heading-color); }

.avatar-btn {
  padding: 0;
  border: 0;
  background: transparent;
}

.avatar-btn::after { display: none; }

.avatar {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  background: #e7e7ff;
  color: #696cff;
  font-weight: 600;
  font-size: 0.9rem;
}

.content-wrapper {
  flex: 1 1 auto;
  width: 100%;
}

.container-p-y {
  padding-block: 1.5rem;
}

.container-xxl {
  max-width: 1440px;
}

/* —— Cards —— */
.card {
  background: var(--bs-paper-bg);
  border: 0;
  border-radius: 0.5rem;
  box-shadow: var(--card-shadow);
  color: var(--bs-body-color);
}

.card-header {
  background: transparent;
  border: 0;
  padding: 1.5rem 1.5rem 0.5rem;
}

.card-body { padding: 1.5rem; }

.card-title {
  color: var(--bs-heading-color);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0;
}

.card-kpi {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.card-kpi h4 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.avatar-icon {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 0.5rem;
  display: inline-grid;
  place-items: center;
  font-size: 1.25rem;
  flex: none;
}

/* Welcome illustration (CSS stand-in for Sneat art) */
.welcome-art {
  position: relative;
  width: 9.5rem;
  height: 7.5rem;
  margin-left: auto;
  display: inline-block;
}

.welcome-art-desk {
  position: absolute;
  inset: auto 8% 12% 8%;
  height: 0.7rem;
  border-radius: 0.35rem;
  background: #e7e7ff;
}

.welcome-art-person {
  position: absolute;
  left: 28%;
  bottom: 1.5rem;
  width: 2.4rem;
  height: 3.4rem;
  border-radius: 1.2rem 1.2rem 0.6rem 0.6rem;
  background: linear-gradient(180deg, #8592ff 0%, #696cff 100%);
}

.welcome-art-person::before {
  content: "";
  position: absolute;
  top: -1.05rem;
  left: 0.35rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: #ffdbcc;
}

.welcome-art-screen {
  position: absolute;
  right: 12%;
  bottom: 1.85rem;
  width: 3.2rem;
  height: 2.2rem;
  border-radius: 0.35rem;
  background: #d7f5fc;
  box-shadow: 0 0.35rem 0 #03c3ec33;
}

/* Transaction-style list */
.tx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.tx-list a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: inherit;
}

.tx-list a:hover .tx-meta strong { color: var(--bs-primary); }

.tx-meta {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.tx-meta strong {
  color: var(--bs-heading-color);
  font-weight: 500;
  font-size: 0.9375rem;
}

.tx-meta small {
  color: #a1acb8;
  font-size: 0.8125rem;
}

/* Activity timeline */
.activity-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.activity-timeline li {
  position: relative;
  display: flex;
  gap: 1rem;
  padding: 0 0 1.15rem 0.25rem;
}

.activity-timeline li:last-child { padding-bottom: 0; }

.activity-timeline .dot {
  position: relative;
  z-index: 1;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.3rem;
  border-radius: 50%;
  background: var(--bs-primary);
  box-shadow: 0 0 0 0.25rem #e7e7ff;
  flex: none;
}

.activity-timeline li:not(:last-child) .dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 1rem;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% + 0.55rem);
  background: #e7e7ff;
}

/* Page chrome used by list/edit screens */
.page-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-head h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--bs-heading-color);
  letter-spacing: -0.02em;
}

.page-head p {
  margin: 0.35rem 0 0;
  color: var(--bs-body-color);
  font-size: 0.9375rem;
}

.page-head .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.stat {
  background: var(--bs-paper-bg);
  border-radius: 0.5rem;
  box-shadow: var(--card-shadow);
  padding: 1.25rem 1.35rem;
}

.stat b {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--bs-heading-color);
  line-height: 1.1;
}

.stat span { color: #a1acb8; font-size: 0.875rem; }

.surface {
  background: var(--bs-paper-bg);
  border-radius: 0.5rem;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}

.surface-pad { padding: 1.5rem; }

.surface-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.surface-head h2 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--bs-heading-color);
}

.surface-head p { margin: 0.25rem 0 0; color: #a1acb8; font-size: 0.875rem; }

.table-console {
  margin: 0;
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(34, 48, 62, 0.03);
}

.table-console thead th {
  background: transparent;
  color: #a1acb8;
  font-size: 0.75rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  font-weight: 600;
  border-bottom: 1px solid var(--bs-border-color);
  padding: 0.85rem 1.5rem;
}

.table-console td {
  padding: 1rem 1.5rem;
  vertical-align: middle;
  border-color: #eceef1;
  color: var(--bs-body-color);
}

.tenant-name {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: inherit;
  text-decoration: none;
}

.tenant-name:hover .ttl { color: var(--bs-primary); }

.initials {
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  background: #e7e7ff;
  color: #696cff;
  font-weight: 600;
  font-size: 0.85rem;
  flex: none;
}

.ttl { font-weight: 500; color: var(--bs-heading-color); }
.sub { color: #a1acb8; font-size: 0.8125rem; }
.plugin-mark {
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  object-fit: contain;
  background: #fff;
  flex: none;
}

.host { font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; color: #697a8d; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 0.25rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}

.chip-ok { background: #e8fadf; color: #28c76f; }
.chip-wait { background: #fff2d6; color: #ffab00; }
.chip-stop, .chip-bad { background: #ffe0db; color: #ff3e1d; }
.chip-plan { background: #e7e7ff; color: #696cff; }

.empty { text-align: left; padding: 0.25rem 0; }
.empty i { font-size: 1.5rem; color: #a1acb8; }
.empty h2 { margin: 0.55rem 0 0.3rem; font-size: 1rem; font-weight: 500; color: var(--bs-heading-color); }
.empty p { color: #a1acb8; margin: 0; max-width: 28rem; font-size: 0.9rem; }

.console-flash { border: 0; border-radius: 0.375rem; }

.form-label { font-weight: 500; font-size: 0.8125rem; color: var(--bs-heading-color); }
.form-control, .form-select {
  border-color: #d9dee3;
  padding: 0.543rem 0.875rem;
  border-radius: 0.375rem;
  background: #fff;
  color: var(--bs-heading-color);
}

.form-control:focus, .form-select:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 0.25rem 0.05rem rgba(105, 108, 255, 0.1);
}

.btn { border-radius: 0.375rem; font-weight: 500; padding: 0.4375rem 1.25rem; }
.btn-sm { padding: 0.3125rem 0.875rem; font-size: 0.8125rem; }

.btn-primary {
  --bs-btn-bg: #696cff;
  --bs-btn-border-color: #696cff;
  --bs-btn-hover-bg: #5f61e6;
  --bs-btn-hover-border-color: #5f61e6;
  box-shadow: 0 0.125rem 0.25rem 0 rgba(105, 108, 255, 0.4);
}

.btn-outline-primary {
  --bs-btn-color: #696cff;
  --bs-btn-border-color: #696cff;
  --bs-btn-hover-bg: #696cff;
  --bs-btn-hover-border-color: #696cff;
  --bs-btn-hover-color: #fff;
}

.btn-ghost {
  --bs-btn-color: var(--bs-heading-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: #d9dee3;
  --bs-btn-hover-bg: rgba(34, 48, 62, 0.04);
  --bs-btn-hover-border-color: #d9dee3;
}

.workspace-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  align-items: center;
  color: #a1acb8;
  font-size: 0.875rem;
}

.nav-pills.console-tabs { gap: 0.35rem; margin-bottom: 1rem; }
.nav-pills.console-tabs .nav-link {
  border-radius: 0.375rem;
  color: #697a8d;
  font-weight: 500;
  padding: 0.4rem 0.9rem;
}
.nav-pills.console-tabs .nav-link.active {
  background: #696cff;
  color: #fff;
}

.callout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.85rem;
  align-items: center;
  background: #e7e7ff;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.95rem 1.1rem;
  margin-bottom: 1rem;
}

.callout i { color: #696cff; font-size: 1.2rem; }
.callout strong { display: block; font-size: 0.9rem; color: var(--bs-heading-color); }
.callout span { color: #697a8d; font-size: 0.82rem; }

.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline article {
  position: relative;
  padding: 0 0 1.1rem 1.15rem;
  border: 0;
}
.timeline article::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #696cff;
  box-shadow: 0 0 0 3px #e7e7ff;
}
.timeline article::after {
  content: "";
  position: absolute;
  left: 0.22rem;
  top: 1rem;
  bottom: 0;
  width: 2px;
  background: #e7e7ff;
}
.timeline article:last-child::after { display: none; }
.timeline article:last-child { padding-bottom: 0; }
.timeline time { font-weight: 500; font-size: 0.78rem; color: #a1acb8; }
.timeline .who {
  color: var(--bs-heading-color);
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0.15rem 0 0.2rem;
  text-transform: none;
  letter-spacing: 0;
}
.timeline p { margin: 0; font-size: 0.9rem; color: #697a8d; }

.danger-zone {
  border: 1px solid #ffcfc7;
  background: #fff8f7;
  box-shadow: none;
}

/* —— Login gate —— */
.gate {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: var(--bs-body-bg);
}

.gate-intro {
  background: linear-gradient(72.47deg, #696cff 22.16%, rgba(105, 108, 255, 0.7) 76.47%);
  color: rgba(255, 255, 255, 0.9);
  padding: 3rem 3.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.gate-intro .app-brand { padding: 0; }
.gate-intro .app-brand-link { color: #fff; }
.gate-intro .app-brand-logo { background: #fff; color: #696cff; box-shadow: none; }
.gate-intro .app-brand-text { color: #fff; }

.gate-intro h1 {
  color: #fff;
  font-size: clamp(1.85rem, 3vw, 2.5rem);
  letter-spacing: -0.03em;
  margin: 1rem 0 0.75rem;
  max-width: 14ch;
  line-height: 1.15;
  font-weight: 700;
}

.gate-intro > div > p {
  max-width: 34ch;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}

.gate-points { list-style: none; padding: 0; margin: 2rem 0 0; }
.gate-points li {
  display: flex;
  gap: 0.7rem;
  margin-bottom: 0.75rem;
  font-weight: 500;
}
.gate-points i { margin-top: 0.15rem; }
.gate-foot { color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; }

.gate-form {
  display: grid;
  place-items: center;
  padding: 2rem 1.4rem;
}

.gate-card {
  width: min(400px, 100%);
  background: #fff;
  border: 0;
  border-radius: 0.5rem;
  box-shadow: var(--card-shadow);
  padding: 1.65rem 1.5rem 1.5rem;
}

.gate-card h2 {
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--bs-heading-color);
}

.confirm-lead { font-size: 1.02rem; color: var(--bs-heading-color); }

.menu-item.is-filtered-out { display: none; }
.menu-header.is-filtered-out { display: none; }

/* —— Member list / card —— */
.member-kicker {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-primary);
  margin-bottom: 0.35rem;
}

.member-tabs {
  gap: 0.25rem;
  border-bottom: 1px solid var(--bs-border-color);
  padding-bottom: 0;
}

.member-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: #697a8d;
  font-weight: 500;
  padding: 0.65rem 0.85rem;
}

.member-tabs .nav-link:hover { color: var(--bs-primary); }
.member-tabs .nav-link.active {
  color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
  background: transparent;
}

.member-stat-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a1acb8;
  margin-bottom: 0.35rem;
}

.member-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--bs-heading-color);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.member-stat-card .card-body { padding: 1.15rem 1.25rem; }

.member-filter-bar .input-group-text {
  background: #fff;
  border-color: #d9dee3;
  color: #a1acb8;
}

.member-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #697a8d;
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: none;
}

.member-back:hover { color: var(--bs-primary); }

.member-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e7e7ff;
  color: #696cff;
  font-weight: 650;
  font-size: 1.25rem;
  flex: none;
}

.member-hero-name {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--bs-heading-color);
  letter-spacing: -0.02em;
}

.member-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.15rem;
  color: #697a8d;
  font-size: 0.9rem;
}

.member-hero-meta i { opacity: 0.8; }

.member-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

.member-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.75rem;
}

.member-quick-grid a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.9rem;
  border-radius: 0.5rem;
  background: var(--bs-body-bg);
  color: inherit;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}

.member-quick-grid a:hover {
  background: #e7e7ff;
  transform: translateY(-1px);
}

.member-quick-grid strong {
  display: block;
  color: var(--bs-heading-color);
  font-weight: 550;
  font-size: 0.9rem;
}

.member-quick-grid small {
  display: block;
  color: #a1acb8;
  font-size: 0.75rem;
}

.member-info-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.member-info-list > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
}

.member-info-list span { color: #a1acb8; }
.member-info-list strong {
  color: var(--bs-heading-color);
  font-weight: 550;
  text-align: right;
}

.lead-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(12rem, 1fr));
  gap: 0.75rem;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}

.lead-board-col {
  min-width: 12rem;
  max-height: min(70vh, 40rem);
  display: flex;
  flex-direction: column;
}

.lead-board-col-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.85rem 1rem 0.5rem;
  border-bottom: 1px solid var(--console-border, #e6eaf0);
}

.lead-board-col-head h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.lead-board-cards {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.75rem;
  overflow-y: auto;
}

.lead-board-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.75rem;
  border: 1px solid var(--console-border, #e6eaf0);
  border-radius: 0.5rem;
  background: #fff;
}

.lead-board-card .ttl {
  font-weight: 600;
  color: var(--bs-heading-color);
  text-decoration: none;
}

.lead-board-move { margin-top: 0.25rem; }

.lead-board-card.is-dragging { opacity: 0.55; }
.lead-board-col.is-drop-target { outline: 2px dashed var(--bs-primary); outline-offset: -4px; }

.desk-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.desk-editor-row {
  display: grid;
  grid-template-columns: minmax(5rem, 8rem) 1fr 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

.desk-editor-grid {
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)) auto;
}

.desk-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

.desk-pos-toolbar {
  display: grid;
  grid-template-columns: 1fr minmax(10rem, 16rem) 5rem auto;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.desk-pos-keys {
  display: grid;
  grid-template-columns: repeat(3, 3.5rem);
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.desk-pos-cart,
.desk-pos-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.desk-pos-item {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--console-border, #e6eaf0);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}

.month-cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.35rem;
}

.month-cal-head,
.month-cal-cell {
  min-height: 5.5rem;
  border: 1px solid var(--console-border, #e6eaf0);
  border-radius: 0.5rem;
  padding: 0.45rem;
  background: #fff;
}

.month-cal-head {
  min-height: 0;
  font-weight: 600;
  background: transparent;
  border: 0;
}

.month-cal-cell.muted { opacity: 0.45; }

.month-cal-cell a {
  display: block;
  font-size: 0.8rem;
  text-decoration: none;
}

@media (max-width: 991.98px) {
  .layout-menu { width: min(86vw, 20rem); flex-basis: auto; }
  .stat-row { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; }
  .gate { grid-template-columns: 1fr; }
  .gate-intro { min-height: 34vh; padding: 1.5rem 1.25rem; }
  .callout { grid-template-columns: 1fr; }
  .welcome-art { margin: 0 auto; }
  .member-hero-actions { justify-content: flex-start; }
  .lead-board { grid-template-columns: repeat(5, minmax(11rem, 1fr)); }
}