:root {
  --ink: #102a43;
  --muted: #627d98;
  --line: #d9e2ec;
  --bg: #f5f7fa;
  --panel: #fff;
  --teal: #087f8c;
  --teal-soft: #e3f4f2;
  --amber: #c77c1a;
  --amber-soft: #fff3d9;
  --red: #bd4b4b;
  --red-soft: #fbe9e9;
  --blue-soft: #e7f0fa;
  --shadow: 0 8px 24px rgba(16, 42, 67, 0.06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  line-height: 1.45;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
.app-shell {
  min-height: 100vh;
  display: flex;
}
.sidebar {
  width: 248px;
  background: var(--ink);
  color: #d9e2ec;
  display: flex;
  flex-direction: column;
  padding: 28px 16px 18px;
  flex-shrink: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 10px 28px;
}
.brand-mark {
  width: 31px;
  height: 31px;
  border: 1px solid #79d4cf;
  color: #9de4df;
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.brand strong {
  display: block;
  font-size: 14px;
  letter-spacing: 0.12em;
  color: #fff;
}
.brand span {
  display: block;
  font-size: 11px;
  color: #9fb3c8;
  margin-top: 2px;
}
.workspace-switch {
  border: 1px solid #36536f;
  padding: 11px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 23px;
  background: #173a59;
}
.workspace-switch small {
  display: block;
  color: #9fb3c8;
  font-size: 10px;
}
.workspace-switch strong {
  display: block;
  font-size: 12px;
  color: #fff;
  margin-top: 2px;
}
.status-dot {
  width: 7px;
  height: 7px;
  background: #67d3bf;
  border-radius: 50%;
  flex: none;
}
.chevron {
  margin-left: auto;
  color: #9fb3c8;
}
.nav {
  display: grid;
  gap: 5px;
}
.nav-item {
  border: 0;
  background: transparent;
  color: #b8c7d7;
  text-align: left;
  padding: 12px 13px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  border-left: 3px solid transparent;
}
.nav-item:hover {
  color: #fff;
  background: #173a59;
}
.nav-item.active {
  color: #fff;
  background: #194665;
  border-left-color: #73d2ca;
}
.nav-icon {
  font-size: 18px;
  width: 20px;
  text-align: center;
  color: #8faac1;
}
.nav-item.active .nav-icon {
  color: #9de4df;
}
.sidebar-foot {
  border-top: 1px solid #294866;
  padding: 15px 7px 0;
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
}
.sidebar-foot strong {
  display: block;
  font-size: 12px;
  color: #fff;
}
.sidebar-foot span {
  display: block;
  font-size: 10px;
  color: #9fb3c8;
}
.avatar {
  width: 29px;
  height: 29px;
  background: #d6eee9;
  color: #0a6c76;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.icon-btn {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 20px;
  padding: 5px;
  line-height: 1;
}
.sidebar-foot .icon-btn {
  margin-left: auto;
  color: #9fb3c8;
}
.main-content {
  min-width: 0;
  flex: 1;
}
.topbar {
  height: 82px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 42px;
}
.eyebrow,
.section-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.topbar h1 {
  font-size: 21px;
  margin: 4px 0 0;
  font-weight: 700;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}
.sync-state {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 7px;
  align-items: center;
}
.sync-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #38a169;
}
.button {
  border: 1px solid transparent;
  padding: 9px 15px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
  min-height: 36px;
}
.button.primary {
  background: var(--teal);
  color: #fff;
}
.button.primary:hover {
  background: #066a75;
}
.button.secondary {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}
.button.secondary:hover {
  border-color: #9fb3c8;
  background: #f8fafc;
}
.mobile-menu {
  display: none;
}
.view {
  display: none;
  padding: 34px 42px 60px;
  max-width: 1440px;
  margin: 0 auto;
}
.view.active {
  display: block;
}
.view-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 26px;
}
.view-intro h2 {
  margin: 0 0 5px;
  font-size: 24px;
}
.view-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.date-chip {
  background: var(--teal-soft);
  color: #0b6973;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
}
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.metric-grid.compact {
  grid-template-columns: repeat(3, 1fr);
}
.metric {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 19px 20px;
  box-shadow: var(--shadow);
}
.metric span {
  font-size: 12px;
  color: var(--muted);
}
.metric strong {
  display: block;
  font-size: 28px;
  margin-top: 7px;
  letter-spacing: 0.02em;
}
.metric small {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
}
.metric .trend {
  color: var(--teal);
  font-size: 11px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
  margin-bottom: 18px;
}
.dashboard-grid.lower {
  grid-template-columns: 1fr 1fr;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.panel-heading {
  padding: 19px 21px 15px;
  border-bottom: 1px solid #edf1f5;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.panel-heading h3 {
  margin: 5px 0 0;
  font-size: 16px;
}
.text-link {
  border: 0;
  background: none;
  color: var(--teal);
  font-size: 12px;
  padding: 5px 0;
}
.funnel-panel,
.action-panel,
.source-panel,
.insight-panel {
  min-height: 275px;
}
.funnel {
  padding: 20px 22px;
}
.funnel-row {
  display: grid;
  grid-template-columns: 74px 1fr 38px;
  align-items: center;
  gap: 13px;
  margin: 12px 0;
}
.funnel-label {
  font-size: 12px;
  color: var(--muted);
}
.funnel-track,
.bar-track {
  height: 9px;
  background: #edf1f5;
  overflow: hidden;
}
.funnel-fill {
  height: 100%;
  background: var(--teal);
}
.funnel-row:nth-child(2) .funnel-fill {
  background: #319ca2;
}
.funnel-row:nth-child(3) .funnel-fill {
  background: #73bfc0;
}
.funnel-row:nth-child(4) .funnel-fill {
  background: #b9dedd;
}
.funnel-count {
  font-weight: 700;
  font-size: 14px;
  text-align: right;
}
.action-panel #todayTasks {
  padding: 9px 20px;
}
.task-mini {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid #edf1f5;
}
.task-mini:last-child {
  border: 0;
}
.priority-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  flex: none;
}
.priority-dot.high {
  background: var(--red);
}
.task-mini div {
  min-width: 0;
  flex: 1;
}
.task-mini strong {
  display: block;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-mini span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  margin-top: 2px;
}
.task-date {
  font-size: 11px;
  color: var(--amber) !important;
  white-space: nowrap;
}
.bar-list {
  padding: 20px 22px;
}
.bar-row {
  display: grid;
  grid-template-columns: 80px 1fr 45px;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
}
.bar-row label {
  font-size: 12px;
  color: var(--muted);
}
.bar-fill {
  height: 100%;
  background: var(--teal);
}
.bar-number {
  text-align: right;
  font-size: 12px;
  font-weight: 700;
}
.insight-list {
  padding: 13px 21px;
}
.insight {
  padding: 11px 0;
  border-bottom: 1px solid #edf1f5;
  display: flex;
  gap: 10px;
}
.insight:last-child {
  border: 0;
}
.insight-mark {
  width: 24px;
  height: 24px;
  background: var(--amber-soft);
  color: var(--amber);
  display: grid;
  place-items: center;
  font-size: 12px;
  flex: none;
}
.insight strong {
  font-size: 12px;
  display: block;
}
.insight p {
  font-size: 11px;
  color: var(--muted);
  margin: 3px 0 0;
}
.toolbar {
  display: flex;
  gap: 9px;
  padding: 16px 18px;
  border-bottom: 1px solid #edf1f5;
}
.search-box {
  border: 1px solid var(--line);
  height: 36px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  flex: 1;
  max-width: 330px;
}
.search-box span {
  color: var(--muted);
  font-size: 18px;
}
.search-box input {
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 12px;
}
.toolbar select,
.task-filters select,
.modal select,
.modal input,
.modal textarea {
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 10px;
  height: 36px;
  outline: 0;
  color: var(--ink);
  font-size: 12px;
}
.toolbar select:focus,
.modal input:focus,
.modal textarea:focus {
  border-color: var(--teal);
}
.table-wrap {
  overflow: auto;
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 850px;
}
.table-wrap th {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  padding: 12px 18px;
  background: #fbfcfd;
  white-space: nowrap;
}
.table-wrap td {
  font-size: 12px;
  padding: 15px 18px;
  border-top: 1px solid #edf1f5;
  white-space: nowrap;
}
.member-name {
  display: flex;
  align-items: center;
  gap: 9px;
}
.member-avatar {
  width: 29px;
  height: 29px;
  background: #e3f4f2;
  color: #0b6973;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
}
.member-contact {
  display: block;
  color: var(--muted);
  font-size: 10px;
  margin-top: 3px;
}
.pill {
  display: inline-block;
  padding: 4px 8px;
  font-size: 11px;
  background: var(--blue-soft);
  color: #2c5b83;
}
.pill.teal {
  background: var(--teal-soft);
  color: #0b6973;
}
.pill.amber {
  background: var(--amber-soft);
  color: #946117;
}
.pill.red {
  background: var(--red-soft);
  color: #a94343;
}
.row-action {
  border: 0;
  background: none;
  color: var(--teal);
  font-size: 12px;
  padding: 0;
}
.empty-state {
  text-align: center;
  color: var(--muted);
  padding: 45px;
  font-size: 13px;
}
.task-filters {
  display: flex;
  border: 1px solid var(--line);
}
.seg {
  border: 0;
  background: #fff;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--muted);
}
.seg.active {
  background: var(--ink);
  color: #fff;
}
.task-summary {
  display: flex;
  gap: 30px;
  padding: 17px 21px;
  border-bottom: 1px solid #edf1f5;
}
.task-summary span {
  font-size: 11px;
  color: var(--muted);
}
.task-summary strong {
  display: block;
  font-size: 20px;
  margin-top: 3px;
}
.task-list {
  padding: 4px 21px;
}
.task-row {
  display: grid;
  grid-template-columns: 8px 1fr 130px 100px 70px;
  gap: 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #edf1f5;
}
.task-row:last-child {
  border: 0;
}
.task-row .priority-dot {
  margin-top: 3px;
}
.task-row strong {
  font-size: 13px;
}
.task-row p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.task-owner,
.task-due {
  font-size: 11px;
  color: var(--muted);
}
.task-due.overdue {
  color: var(--red);
}
.done-btn {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--teal);
  font-size: 11px;
  padding: 6px 8px;
}
.done-btn.done {
  color: var(--muted);
  background: #f5f7fa;
}
.campaign-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.campaign-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 19px;
  box-shadow: var(--shadow);
}
.campaign-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.campaign-code {
  font-size: 11px;
  color: var(--teal);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.campaign-channel {
  font-size: 11px;
  padding: 4px 7px;
  background: var(--blue-soft);
  color: #2c5b83;
}
.campaign-card h3 {
  font-size: 16px;
  margin: 16px 0 5px;
}
.campaign-meta {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 18px;
}
.campaign-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #edf1f5;
  padding-top: 14px;
}
.campaign-stats span {
  font-size: 10px;
  color: var(--muted);
}
.campaign-stats strong {
  font-size: 20px;
  display: block;
  margin-top: 3px;
}
.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.data-card {
  padding: 24px;
}
.data-icon {
  width: 38px;
  height: 38px;
  background: var(--teal-soft);
  color: var(--teal);
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 15px;
}
.data-card h3 {
  margin: 0;
  font-size: 17px;
}
.data-card > p {
  font-size: 12px;
  color: var(--muted);
  margin: 7px 0 18px;
}
.data-card small {
  color: var(--muted);
  font-size: 11px;
  display: block;
  margin-top: 14px;
}
.data-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.audit-list {
  border-top: 1px solid #edf1f5;
}
.audit-item {
  padding: 10px 0;
  border-bottom: 1px solid #edf1f5;
}
.audit-item strong {
  display: block;
  font-size: 12px;
}
.audit-item span {
  color: var(--muted);
  font-size: 10px;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16, 42, 67, 0.45);
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 10;
}
.modal-backdrop[hidden] {
  display: none;
}
.modal {
  background: #fff;
  width: min(560px, 100%);
  padding: 24px;
  box-shadow: 0 18px 50px rgba(16, 42, 67, 0.2);
}
.modal-heading {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #edf1f5;
  padding-bottom: 17px;
  margin-bottom: 19px;
}
.modal-heading h2 {
  font-size: 20px;
  margin: 5px 0 0;
}
.modal form {
  display: grid;
  gap: 14px;
}
.modal label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.modal label > span {
  color: var(--red);
}
.modal input,
.modal select {
  width: 100%;
}
.modal textarea {
  width: 100%;
  height: auto;
  padding: 9px;
  resize: vertical;
}
.form-grid {
  display: grid;
  gap: 12px;
}
.form-grid.two {
  grid-template-columns: 1fr 1fr;
}
.check-row {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
}
.check-row input {
  width: 15px !important;
  height: 15px !important;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 6px;
}
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 15px);
  background: var(--ink);
  color: #fff;
  padding: 11px 18px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  z-index: 20;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.member-link {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  color: var(--ink);
  font: inherit;
}
.member-link:hover strong {
  color: var(--teal);
}
.detail-modal {
  max-width: 640px;
}
.detail-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  padding: 0 0 18px;
  border-bottom: 1px solid #edf1f5;
}
.detail-summary > div {
  display: grid;
  gap: 4px;
}
.detail-summary span {
  font-size: 10px;
  color: var(--muted);
}
.detail-summary strong {
  font-size: 12px;
}
.timeline {
  padding: 16px 0 4px;
  max-height: 300px;
  overflow: auto;
}
.timeline-item {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 11px;
  align-items: start;
  position: relative;
  padding: 0 0 18px;
}
.timeline-item:not(:last-child):before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.timeline-dot {
  width: 11px;
  height: 11px;
  border: 2px solid var(--teal);
  background: #fff;
  position: relative;
  z-index: 1;
  margin-top: 2px;
}
.timeline-item strong {
  font-size: 12px;
}
.timeline-item p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
}
.timeline-item time {
  font-size: 10px;
  color: var(--muted);
}
.import-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
  margin: 4px 0 16px;
}
.import-summary > div {
  background: #f7f9fb;
  padding: 12px;
}
.import-summary span {
  display: block;
  color: var(--muted);
  font-size: 10px;
}
.import-summary strong {
  display: block;
  font-size: 22px;
  margin-top: 3px;
}
.import-summary .good {
  color: var(--teal);
}
.import-summary .warn {
  color: var(--amber);
}
.import-summary .bad {
  color: var(--red);
}
.import-errors {
  background: var(--amber-soft);
  color: #805816;
  padding: 10px 12px;
  font-size: 11px;
  min-height: 38px;
}
.import-errors p {
  margin: 0;
}
@media (max-width: 1000px) {
  .sidebar {
    width: 210px;
  }
  .view {
    padding-left: 26px;
    padding-right: 26px;
  }
  .topbar {
    padding: 0 26px;
  }
  .campaign-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .member-modal-backdrop {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .member-modal {
    flex: 0 1 auto;
    width: calc(100vw - 24px);
    max-width: 560px;
    max-height: calc(100dvh - 24px);
    margin: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

.nav-section-label {
  font-size: 10px;
  color: #7791a9;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 12px 13px 3px;
  text-transform: uppercase;
}
.shell-placeholder .view-intro {
  margin-bottom: 30px;
}
.module-status {
  padding: 6px 10px;
  border: 1px solid #b8e1db;
  color: #0b6973;
  background: var(--teal-soft);
  font-size: 11px;
  font-weight: 600;
}
.module-status.planned {
  border-color: #e8d3a7;
  background: var(--amber-soft);
  color: #946117;
}
.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.placeholder-card {
  background: #fff;
  border: 1px solid var(--line);
  padding: 24px;
  min-height: 180px;
  box-shadow: var(--shadow);
}
.placeholder-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--blue-soft);
  color: #2c5b83;
  font-size: 20px;
  margin-bottom: 18px;
}
.placeholder-card h3 {
  font-size: 16px;
  margin: 0 0 7px;
}
.placeholder-card p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  max-width: 260px;
}
@media (max-width: 760px) {
  .placeholder-grid {
    grid-template-columns: 1fr;
  }
  .nav-section-label {
    padding-top: 9px;
  }
}

/* Some in-app mobile browsers report a wider CSS viewport before applying device scaling. */
@media (max-width: 1000px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overscroll-behavior-x: none;
  }
  .app-shell {
    position: relative;
    display: block;
    min-height: 100dvh;
  }
  .main-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .mobile-menu {
    display: block;
    flex: none;
    margin-right: 10px;
    color: var(--ink);
  }
  .topbar {
    height: 64px;
    padding: 0 16px;
    justify-content: flex-start;
    min-width: 0;
  }
  .topbar h1 {
    font-size: 17px;
    white-space: nowrap;
  }
  .topbar-actions {
    margin-left: auto;
    gap: 10px;
    min-width: 0;
  }
  .topbar-actions .sync-state {
    display: none;
  }
  .topbar-actions .button {
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
  }
  .sidebar {
    position: fixed;
    z-index: 20;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(82vw, 320px);
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    box-shadow: 12px 0 30px rgba(16, 42, 67, 0.24);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-backdrop {
    z-index: 19;
    background: rgba(16, 42, 67, 0.42);
  }
  .view {
    width: 100%;
    max-width: 100%;
    padding: 22px 16px 40px;
    overflow-x: hidden;
  }
  .view-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
  }
  .view-intro h2 {
    font-size: 25px;
    line-height: 1.32;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .view-intro p {
    font-size: 13px;
    max-width: 100%;
  }
  .metric-grid,
  .metric-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
  }
  .metric {
    min-width: 0;
    padding: 15px 14px;
  }
  .metric strong {
    font-size: 25px;
  }
  .dashboard-grid,
  .dashboard-grid.lower,
  .data-grid,
  .schedule-layout,
  .settings-layout,
  .message-layout,
  .report-layout,
  .segment-layout {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 14px;
  }
  .panel {
    min-width: 0;
    max-width: 100%;
  }
  .panel-heading {
    padding: 16px;
    gap: 12px;
    min-width: 0;
  }
  .toolbar {
    flex-wrap: wrap;
    padding: 12px 14px;
    max-width: 100%;
  }
  .toolbar .search-box {
    flex-basis: 100%;
    max-width: none;
  }
  .campaign-grid,
  .placeholder-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .view .form-grid.two {
    grid-template-columns: minmax(0, 1fr);
  }
  .table-wrap {
    max-width: 100%;
    overflow-x: auto;
  }
}

.segment-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.panel-note {
  font-size: 11px;
  color: var(--muted);
}
.segment-list {
  padding: 7px 18px;
}
.segment-row {
  border: 0;
  border-bottom: 1px solid #edf1f5;
  background: #fff;
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr 32px;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 13px 4px;
  color: var(--ink);
}
.segment-row:last-child {
  border-bottom: 0;
}
.segment-row:hover,
.segment-row.selected {
  background: #f0f8f7;
}
.segment-symbol {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--teal-soft);
  color: var(--teal);
  font-size: 13px;
}
.segment-row strong {
  font-size: 13px;
  display: block;
}
.segment-row small {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}
.segment-row b {
  font-size: 16px;
  text-align: right;
}
.segment-members {
  margin-top: 0;
}
.tag-options {
  border: 1px solid var(--line);
  padding: 10px 11px;
  margin: 0;
  display: grid;
  gap: 8px;
}
.tag-options legend {
  font-size: 12px;
  color: var(--muted);
  padding: 0 4px;
}
.tag-options > div {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}
.tag-check {
  display: inline-flex !important;
  align-items: center;
  cursor: pointer;
}
.tag-check input {
  width: 14px !important;
  height: 14px !important;
  position: absolute;
  opacity: 0;
}
.tag-check input:focus + .tag-badge {
  outline: 2px solid var(--teal);
}
.tag-check input:checked + .tag-badge {
  box-shadow: inset 0 0 0 1px currentColor;
}
.tag-badge {
  display: inline-block;
  padding: 3px 7px;
  font-size: 10px;
  background: var(--blue-soft);
  color: #2c5b83;
  white-space: nowrap;
}
.tag-badge.teal {
  background: var(--teal-soft);
  color: #0b6973;
}
.tag-badge.blue {
  background: var(--blue-soft);
  color: #2c5b83;
}
.tag-badge.amber {
  background: var(--amber-soft);
  color: #946117;
}
.tag-badge.rose {
  background: var(--red-soft);
  color: #a94343;
}
.tag-cell {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.small-modal {
  width: min(420px, 100%);
}
.import-history-panel {
  margin-top: 18px;
}
.import-history-panel td:first-child {
  min-width: 210px;
}
.import-history-panel .member-contact {
  margin-top: 3px;
}
.split-actions {
  display: flex;
  gap: 9px;
}
.schedule-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 18px;
  margin-bottom: 18px;
}
.session-panel {
  margin-top: 0;
}
.session-panel .panel-heading {
  align-items: center;
}
.session-panel select {
  border: 1px solid var(--line);
  background: #fff;
  height: 34px;
  padding: 0 8px;
  color: var(--ink);
  font-size: 12px;
}
.resource-list {
  padding: 8px 20px;
}
.resource-group {
  padding: 9px 0 15px;
  border-bottom: 1px solid #edf1f5;
}
.resource-group:last-child {
  border-bottom: 0;
}
.resource-group > span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.resource-group > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 12px;
}
.resource-group small {
  color: var(--muted);
  font-size: 11px;
}
.appointment-panel {
  margin-top: 18px;
}
.appointment-panel .panel-heading {
  align-items: center;
}
.appointment-panel select {
  border: 1px solid var(--line);
  background: #fff;
  height: 34px;
  padding: 0 8px;
  color: var(--ink);
  font-size: 12px;
}
.appointment-capacity {
  background: var(--teal-soft);
  color: #0b6973;
  font-size: 12px;
  padding: 10px 12px;
}
.checkin-ledger-panel {
  margin-top: 18px;
}
.checkin-ledger-panel .panel-heading {
  align-items: center;
}
.checkin-ledger-panel select {
  border: 1px solid var(--line);
  background: #fff;
  height: 34px;
  padding: 0 8px;
  color: var(--ink);
  font-size: 12px;
}
.checkin-member {
  padding: 10px 12px;
  background: var(--blue-soft);
  color: #2c5b83;
  font-size: 12px;
  font-weight: 600;
}
.checkin-card-note {
  padding: 10px 12px;
  background: var(--teal-soft);
  color: #0b6973;
  font-size: 12px;
}
.checkin-ledger-panel td .member-contact {
  margin-top: 3px;
}
.refund-panel {
  margin-top: 18px;
}
.refund-list {
  padding: 8px 20px;
}
.refund-item {
  display: grid;
  grid-template-columns: 25px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #edf1f5;
}
.refund-item:last-child {
  border-bottom: 0;
}
.refund-item strong {
  font-size: 12px;
}
.refund-item p {
  font-size: 11px;
  color: var(--muted);
  margin: 3px 0 0;
}
.refund-order-summary,
.order-payment-note,
.order-product-note {
  padding: 10px 12px;
  background: var(--blue-soft);
  color: #2c5b83;
  font-size: 12px;
}
.order-payment-note {
  background: var(--teal-soft);
  color: #0b6973;
}
.order-product-note {
  background: var(--amber-soft);
  color: #805816;
}
.inventory-ledger-panel {
  margin-top: 18px;
}
.inventory-movement-note {
  padding: 10px 12px;
  background: var(--teal-soft);
  color: #0b6973;
  font-size: 12px;
}
.session-qr-preview {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #f7fafb;
  border: 1px solid var(--line);
  margin: 12px 0;
}
.session-qr-preview img {
  width: 180px;
  height: 180px;
  image-rendering: auto;
  background: #fff;
  padding: 8px;
  border: 1px solid var(--line);
}
.session-member-link {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #edf1f5;
}
.session-member-link .panel-heading {
  padding: 0 0 12px;
  border: 0;
}
.session-member-link .form-grid {
  padding: 0;
}
.session-member-link label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.session-member-link select,
.session-member-link input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 10px;
  color: var(--ink);
  font-size: 12px;
}
.session-member-link #memberAccessUrl {
  margin-top: 10px;
}
.session-member-link .panel-note {
  display: block;
  margin: 10px 0 0;
  max-width: none;
  text-align: left;
}
.settings-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 18px;
  margin-bottom: 18px;
}
.store-summary {
  padding: 19px 21px;
  display: grid;
  gap: 17px;
}
.store-summary > div {
  display: grid;
  gap: 4px;
}
.store-summary span {
  font-size: 11px;
  color: var(--muted);
}
.store-summary strong {
  font-size: 15px;
}
.store-summary b {
  width: max-content;
}
.role-list {
  padding: 7px 20px;
}
.role-row {
  padding: 12px 0;
  border-bottom: 1px solid #edf1f5;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.role-row > div {
  min-width: 0;
  flex: 1;
}
.role-row:last-child {
  border-bottom: 0;
}
.role-row strong {
  font-size: 13px;
}
.role-row p {
  font-size: 11px;
  color: var(--muted);
  margin: 3px 0 8px;
}
.role-row span {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.role-row i {
  font-size: 10px;
  font-style: normal;
  padding: 3px 6px;
  background: var(--blue-soft);
  color: #2c5b83;
}
.role-row .row-action {
  flex: none;
  margin-top: 3px;
}
.role-permissions {
  border: 1px solid var(--line);
  padding: 12px;
  margin: 0;
  min-width: 0;
}
.role-permissions legend {
  font-size: 12px;
  color: var(--muted);
  padding: 0 4px;
}
.role-permission-options {
  display: grid;
  gap: 12px;
}
.role-permission-options section {
  display: grid;
  gap: 7px;
}
.role-permission-options section > strong {
  font-size: 11px;
  color: var(--muted);
}
.role-permission-options section > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.role-permission-check {
  display: inline-flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 6px !important;
  color: var(--ink) !important;
  font-size: 11px !important;
}
.role-permission-check input {
  width: 14px !important;
  height: 14px !important;
}
.staff-panel {
  margin-top: 0;
}
.export-center {
  margin-bottom: 18px;
}
.integration-panel {
  margin-bottom: 18px;
}
.integration-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.integration-actions select {
  height: 34px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 9px;
  color: var(--ink);
  font-size: 12px;
}
.integration-notice {
  padding: 12px 21px;
  color: var(--muted);
  font-size: 11px;
  border-bottom: 1px solid #edf1f5;
}
.runtime-config-note {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  background: #f5f8fb;
  border: 1px solid #e5ebf1;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}
.runtime-config-note strong {
  color: var(--ink);
  font-size: 12px;
}
.message-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  margin-bottom: 18px;
}
.message-template-list {
  padding: 7px 20px;
}
.message-template-row {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #edf1f5;
}
.message-template-row:last-child {
  border-bottom: 0;
}
.message-template-row strong {
  font-size: 12px;
}
.message-template-row p {
  font-size: 11px;
  color: var(--muted);
  margin: 3px 0 0;
}
.message-rules {
  padding: 10px 21px 15px;
}
.message-rules > div {
  padding: 11px 0;
  border-bottom: 1px solid #edf1f5;
}
.message-rules > div:last-child {
  border-bottom: 0;
}
.message-rules strong {
  font-size: 12px;
  display: block;
}
.message-rules span {
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 4px;
}
.message-job-panel {
  margin-top: 0;
}
.report-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 18px;
  margin-bottom: 18px;
}
.report-layout .panel-heading {
  align-items: center;
}
.view-intro > select {
  border: 1px solid var(--line);
  background: #fff;
  height: 36px;
  padding: 0 10px;
  color: var(--ink);
  font-size: 12px;
}
.report-health-list {
  padding: 8px 20px;
}
.report-health-list > div {
  padding: 12px 0;
  border-bottom: 1px solid #edf1f5;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  align-items: center;
}
.report-health-list > div:last-child {
  border-bottom: 0;
}
.report-health-list span {
  font-size: 12px;
  color: var(--muted);
}
.report-health-list strong {
  font-size: 14px;
  text-align: right;
}
.report-health-list small {
  grid-column: 1 / -1;
  font-size: 10px;
  color: var(--muted);
}
.report-source-panel {
  margin-top: 0;
}
.report-empty-cell {
  text-align: center !important;
  color: var(--muted);
  padding: 34px !important;
}
.report-diagnostics-panel {
  margin-top: 18px;
}
.diagnostic-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.diagnostic-metrics > div {
  min-height: 92px;
  padding: 14px 16px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.diagnostic-metrics > div:nth-child(3n) {
  border-right: 0;
}
.diagnostic-metrics span {
  font-size: 12px;
  color: var(--muted);
}
.diagnostic-metrics strong {
  font-size: 18px;
  color: var(--ink);
}
.diagnostic-metrics small {
  font-size: 11px;
  color: var(--muted);
}
.diagnostic-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 24px;
  padding: 18px;
}
.diagnostic-grid h4 {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--ink);
}
.diagnostic-alerts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.diagnostic-alert {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  border-left: 3px solid #8e99a6;
  background: #f7f9fb;
  font-size: 12px;
}
.diagnostic-alert.medium {
  border-left-color: #c98b1d;
  background: #fffaf0;
}
.diagnostic-alert.high {
  border-left-color: #c94747;
  background: #fff6f6;
}
.diagnostic-alert span {
  color: var(--muted);
  white-space: nowrap;
}
.diagnostic-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 14px 0;
}
.remote-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid #edf1f5;
  color: var(--muted);
  font-size: 11px;
}
.remote-pager span {
  margin-right: auto;
}
.remote-pager .button {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 11px;
}
.list-inline-search {
  height: 36px;
  border: 1px solid var(--line);
  padding: 0 10px;
  outline: 0;
  color: var(--ink);
  font-size: 12px;
  min-width: 150px;
}
.list-inline-search:focus {
  border-color: var(--teal);
}
@media (max-width: 760px) {
  .split-actions {
    width: 100%;
  }
  .split-actions .button {
    flex: 1;
  }
  .schedule-layout,
  .settings-layout,
  .message-layout,
  .report-layout,
  .diagnostic-grid {
    grid-template-columns: 1fr;
  }
  .diagnostic-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .diagnostic-metrics > div:nth-child(3n) {
    border-right: 1px solid var(--line);
  }
  .diagnostic-metrics > div:nth-child(2n) {
    border-right: 0;
  }
  .session-panel .panel-heading {
    align-items: flex-start;
  }
  .session-panel select {
    margin-top: 6px;
  }
}
@media (max-width: 760px) {
  .segment-layout {
    grid-template-columns: 1fr;
  }
  .segment-row {
    padding: 12px 2px;
  }
  .segment-members .panel-heading {
    gap: 12px;
  }
  .segment-members .button {
    white-space: nowrap;
    padding: 8px 10px;
  }
}

.metric-link {
  width: 100%;
  border: 1px solid var(--line);
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
}
.metric-link:hover {
  border-color: var(--teal);
  transform: translateY(-1px);
}
.metric-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.metric-link.metric-active {
  border-color: var(--teal);
  background: rgba(56, 161, 156, 0.08);
  box-shadow: 0 0 0 1px var(--teal) inset;
}
.metric-link.metric-active strong {
  color: var(--teal);
}
.funnel-link {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.funnel-link:hover {
  background: #f7fbfb;
}
.funnel-link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.button.danger {
  border-color: #e5bcbc;
  background: #fff;
  color: var(--red);
}
.button.danger:hover {
  background: var(--red-soft);
  border-color: var(--red);
}
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}
.app-shell,
.main-content,
.view {
  min-width: 0;
  max-width: 100%;
}
.view-intro,
.panel-heading,
.toolbar {
  max-width: 100%;
}
.table-wrap {
  touch-action: pan-x pan-y;
}
.member-modal-backdrop {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
}
.member-modal {
  width: min(560px, 100%);
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
.member-modal form,
.member-modal .form-grid,
.member-modal label,
.member-modal fieldset {
  min-width: 0;
  max-width: 100%;
}
.member-modal input,
.member-modal select,
.member-modal textarea {
  max-width: 100%;
  min-width: 0;
}
.member-modal-open {
  overflow: hidden;
  overscroll-behavior-x: none;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  box-sizing: border-box;
  background: var(--bg);
}
.login-screen[hidden] {
  display: none;
}
.login-panel {
  width: min(390px, 100%);
  background: #fff;
  border: 1px solid var(--line);
  padding: 32px;
  box-shadow: 0 18px 50px rgba(16, 42, 67, 0.12);
  box-sizing: border-box;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 36px;
}
.login-brand .brand-mark {
  width: 38px;
  height: 38px;
  font-size: 21px;
}
.login-brand strong {
  font-size: 14px;
}
.login-brand span {
  font-size: 11px;
}
.login-heading {
  margin-bottom: 24px;
}
.login-heading h1 {
  font-size: 25px;
  margin: 8px 0 7px;
}
.login-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.auth-choice {
  display: grid;
  gap: 10px;
}
.auth-choice .button {
  height: 44px;
}
.login-form {
  display: grid;
  gap: 15px;
}
.login-form label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.login-form input {
  border: 1px solid var(--line);
  height: 42px;
  padding: 0 12px;
  outline: 0;
  color: var(--ink);
  font-size: 13px;
  box-sizing: border-box;
}
.login-form input:focus {
  border-color: var(--teal);
}
.login-form .button {
  width: 100%;
  height: 42px;
  margin-top: 4px;
}
.login-error {
  margin: 0;
  color: var(--red);
  font-size: 12px;
  line-height: 1.5;
}
.login-note {
  margin-top: 23px;
  padding-top: 15px;
  border-top: 1px solid #edf1f5;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}
.app-shell[hidden] {
  display: none;
}
.sidebar-foot #logoutButton {
  margin-left: auto;
}
.sidebar-foot #logoutButton + .icon-btn {
  margin-left: 0;
}
.back-link {
  border: 0;
  background: transparent;
  color: var(--teal);
  padding: 0;
  margin: 0 0 8px;
  font-size: 12px;
  cursor: pointer;
}
.back-link:hover {
  text-decoration: underline;
}
.mobile-back-link {
  display: none;
}
.sidebar-close,
.sidebar-backdrop {
  display: none;
}
@media (max-width: 1000px) {
  .sidebar {
    height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: 22px;
  }
  .sidebar-close {
    display: block;
    position: absolute;
    top: 18px;
    right: 14px;
    color: #d9e2ec;
  }
  .sidebar .brand {
    padding-right: 38px;
  }
  .sidebar-backdrop {
    display: block;
    position: fixed;
    z-index: 19;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(16, 42, 67, 0.42);
    touch-action: manipulation;
  }
  .sidebar-backdrop[hidden] {
    display: none;
  }
}

/* Mobile navigation is an overlay drawer; the main page keeps its position. */
@media (max-width: 760px) {
  .app-shell {
    position: relative;
    display: block;
    min-height: 100dvh;
  }
  .main-content {
    width: 100%;
    min-width: 0;
  }
  .mobile-menu {
    display: block;
    flex: none;
    margin-right: 10px;
    color: var(--ink);
  }
  .topbar {
    height: 64px;
    padding: 0 16px;
    justify-content: flex-start;
  }
  .topbar h1 {
    font-size: 17px;
  }
  .topbar-actions {
    margin-left: auto;
    gap: 10px;
  }
  .topbar-actions .sync-state {
    display: none;
  }
  .sidebar {
    position: fixed;
    z-index: 20;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(82vw, 320px);
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    box-shadow: 12px 0 30px rgba(16, 42, 67, 0.24);
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .sidebar-backdrop {
    z-index: 19;
    background: rgba(16, 42, 67, 0.42);
  }
}

/* Keep operational pages readable on phone-sized screens. */
@media (max-width: 760px) {
  .view {
    padding: 22px 16px 40px;
  }
  .view-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
  }
  .view-intro h2 {
    font-size: 25px;
    line-height: 1.32;
  }
  .view-intro p {
    font-size: 13px;
  }
  .date-chip {
    align-self: flex-start;
  }
  .metric-grid,
  .metric-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
  }
  .metric {
    min-width: 0;
    padding: 15px 14px;
  }
  .metric strong {
    font-size: 25px;
  }
  .metric small {
    line-height: 1.45;
  }
  .dashboard-grid,
  .dashboard-grid.lower,
  .data-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 14px;
  }
  .panel {
    min-width: 0;
  }
  .panel-heading {
    padding: 16px;
    gap: 12px;
  }
  .panel-heading h3 {
    font-size: 16px;
  }
  .funnel,
  .bar-list,
  .insight-list {
    padding-left: 16px;
    padding-right: 16px;
  }
  .task-summary {
    gap: 18px;
    padding: 15px 16px;
  }
  .task-list {
    padding-left: 16px;
    padding-right: 16px;
  }
  .toolbar {
    flex-wrap: wrap;
    padding: 12px 14px;
  }
  .toolbar .search-box {
    flex-basis: 100%;
    max-width: none;
  }
  .campaign-grid,
  .placeholder-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .topbar-actions .button {
    padding: 8px 10px;
    font-size: 12px;
  }
  .view .form-grid.two {
    grid-template-columns: minmax(0, 1fr);
  }
  .view .form-grid.two > label,
  .view .form-grid.two > .modal-actions {
    min-width: 0;
    width: 100%;
  }
  .view .form-grid.two input,
  .view .form-grid.two select,
  .view .form-grid.two textarea {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .view .form-grid.two .modal-actions {
    grid-column: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 9px;
  }
  .view .form-grid.two .modal-actions .button {
    flex: 1 1 180px;
    min-width: 0;
  }
  .view .panel-note {
    max-width: 55%;
    overflow-wrap: anywhere;
    text-align: right;
  }
  #cardTemplateForm,
  #passwordForm {
    padding: 18px 36px 22px;
  }
}

/* iOS date controls have a larger intrinsic width; keep them inside their form column. */
.member-modal .form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.member-modal .form-grid.two > label {
  min-width: 0;
}
.member-modal .form-grid.two > label > input,
.member-modal .form-grid.two > label > select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.member-modal #memberExpiry,
.member-modal #memberBirthday,
.member-modal #memberLastVisit {
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
}
.member-modal input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  padding-inline: 10px;
}
.member-modal input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}
/* Keep long forms reachable on short desktop and mobile viewports. */
.modal-backdrop {
  overflow-y: auto;
}
.modal {
  max-height: calc(100vh - 36px);
  overflow-y: auto;
}
[hidden] {
  display: none !important;
}

.campaign-copy {
  font-size: 11px;
  color: var(--muted);
  margin: 7px 0;
  line-height: 1.55;
}
.campaign-copy strong {
  color: var(--ink);
  font-weight: 600;
}
.campaign-card:has(.campaign-copy) .campaign-meta {
  margin-bottom: 10px;
}
.campaign-card:has(.campaign-copy) .campaign-stats {
  margin-top: 14px;
}
.campaign-actions {
  display: flex;
  gap: 12px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid #edf1f5;
}
.danger-link {
  color: var(--red) !important;
}
.idea-library {
  border: 1px solid #d9e2ec;
  padding: 11px;
  background: #fbfcfd;
}
.idea-library-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 9px;
}
.idea-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.idea-btn {
  border: 1px solid #c9d7e2;
  background: #fff;
  color: var(--ink);
  padding: 6px 8px;
  font-size: 11px;
  text-align: left;
}
.idea-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
}

/* Desktop navigation can collapse when the work area needs more room. */
@media (min-width: 1001px) {
  .sidebar {
    transition:
      width 0.2s ease,
      padding 0.2s ease;
  }
  .app-shell.sidebar-collapsed .sidebar {
    width: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
  }
  .app-shell.sidebar-collapsed .sidebar > * {
    opacity: 0;
    pointer-events: none;
  }
  .sidebar-reopen {
    display: none;
    position: fixed;
    z-index: 6;
    left: 12px;
    top: 96px;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    box-shadow: var(--shadow);
    place-items: center;
  }
  .app-shell.sidebar-collapsed .sidebar-reopen {
    display: grid;
  }
}
.sidebar-reopen {
  display: none;
  border-radius: 0;
}

/* Fallback for local file previews: the menu can open before application JavaScript initializes. */
@media (max-width: 1000px) {
  .sidebar.open {
    transform: translateX(0) !important;
  }
}

.page-back {
  border: 0;
  background: transparent;
  color: var(--teal);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  margin-right: 12px;
}
.page-back:hover {
  background: var(--teal-soft);
}
.danger-button {
  border-color: #e5abab !important;
  color: var(--red) !important;
}
.danger-button:hover {
  background: var(--red-soft) !important;
}
.lead-mini {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
}
.lead-mini:hover,
.lead-mini:focus-visible {
  background: #f0f8f7;
  outline: none;
}
.lead-mini:focus-visible {
  box-shadow: inset 0 0 0 2px var(--teal);
}
.filter-field {
  display: grid;
  gap: 5px;
  font-size: 11px;
  color: var(--muted);
}
.filter-field input {
  border: 1px solid var(--line);
  background: #fff;
  padding: 0 10px;
  height: 36px;
  outline: 0;
  color: var(--ink);
  font-size: 12px;
}

.today-session-desk {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.today-session-desk .panel-heading {
  padding: 0 0 12px;
}
.today-session-desk .panel-note {
  display: block;
  margin-top: 4px;
}
.today-batch-column {
  width: 38px;
  text-align: center !important;
}
.today-batch-column input {
  width: 16px;
  height: 16px;
  accent-color: var(--teal);
}
.selected-row td {
  background: rgba(8, 127, 140, 0.08);
}

/* ==========================================================================
   Mobile (<= 760px) comprehensive layout pass.
   Earlier rules only adapted sidebar / schedule / segment; metric-grid,
   dashboard-grid, panel-heading and inline button groups still rendered in
   desktop columns, which forced a horizontal scrollbar and a user-perceived
   "页面太大需要缩放" effect. Stacking everything at <= 760px makes the
   dashboard fit the phone viewport at the configured device-width.
   ========================================================================== */
@media (max-width: 760px) {
  .main-content {
    padding: 12px 14px 28px;
  }
  /* Page-level intro (h2 + paragraph + split-actions buttons). Stack the
     intro so the button group never pushes the heading off-screen. */
  .view-intro {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
  }
  /* Button groups inside view-intro and panels: wrap onto multiple rows
     instead of forcing one long line that overflows. */
  .split-actions,
  .button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .split-actions .button,
  .button-group .button {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }
  /* 4-up metric cards become a 2-up grid; sub-titles breathe. */
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .metric-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .metric {
    padding: 14px 14px;
  }
  .metric strong {
    font-size: 22px;
  }
  /* 2-up dashboard rows stack into one column. */
  .dashboard-grid,
  .dashboard-grid.lower {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* Panel headings (h3 + action buttons) wrap to a column so wide button
     groups like "+ 登记线索" never overflow the panel right edge. */
  .panel-heading {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px 16px 12px;
  }
  .panel-heading h3 {
    margin: 0;
  }
  .panel-heading .split-actions,
  .panel-heading .button-group,
  .panel-heading .heading-actions,
  .panel-heading .panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .panel-heading .split-actions .button,
  .panel-heading .button-group .button,
  .panel-heading .heading-actions .button,
  .panel-heading .panel-actions .button {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
  }
  /* Funnel + Follow-up tables: keep labels and bars side-by-side, but cap
     the bar width so very narrow phones still fit. */
  .funnel-row {
    grid-template-columns: 88px 1fr 36px;
    gap: 10px;
  }
  .funnel-bar-track {
    min-width: 0;
  }
  /* Right-side nav links inside cards: stack below the heading rather
     than being pinned to a fixed right column. */
  .panel-heading .panel-link,
  .panel-heading a[data-view-link] {
    align-self: flex-start;
  }
  /* Inputs + buttons shrink-to-fit. */
  .split-actions .button {
    min-width: 0;
  }
  table.responsive-table,
  .table-wrap {
    overflow-x: auto;
  }
  /* ----------------------------------------------------------------------
     Panel content padding pass.
     Some panels (store business rules, role list, store summary) have
     children that inherit no padding and butt against the screen edge.
     Standardize padding inside every panel so labels, inputs, lists and
     action buttons all share the same left/right gutter as the heading.
     ---------------------------------------------------------------------- */
  .panel-heading {
    padding: 14px 16px 12px;
  }
  .panel .form-grid,
  .panel .role-list,
  .panel .store-summary,
  .panel .table-wrap,
  .panel .staff-panel,
  .panel .panel-body,
  .panel .empty-state,
  .panel .modal-actions {
    padding-left: 16px;
    padding-right: 16px;
  }
  .panel .form-grid {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .panel .role-list {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .panel .modal-actions {
    padding-top: 14px;
    padding-bottom: 16px;
    justify-content: stretch;
    flex-direction: column;
    gap: 8px;
  }
  .panel .modal-actions .button {
    width: 100%;
  }
  /* Form-grid labels (single-column on mobile) get a hint of breathing room. */
  .panel .form-grid > label,
  .panel .form-grid > .check-row {
    padding: 0;
    min-width: 0;
  }
  .panel .form-grid > label input,
  .panel .form-grid > label select,
  .panel .form-grid > label textarea {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
  }
  /* Role rows: keep the row-action button on the right with a clear gap
     instead of butting against the screen. */
  .role-row {
    align-items: flex-start;
    padding: 14px 0;
  }
  .role-row .row-action {
    align-self: flex-start;
    flex-shrink: 0;
  }
  /* Generic table inside panel gets its own internal padding so the cells
     don't sit right against the panel border. */
  .table-wrap table {
    width: 100%;
  }
  .table-wrap th,
  .table-wrap td {
    padding: 10px 12px;
  }
}