:root {
  --ink: #203047;
  --muted: #63738a;
  --accent: #4967dc;
  --purple: #8259cf;
  --line: #dce3ef;
  --paper: #fff;
  --bg: #f1f4fa;
  --danger: #b6253e;
  --green: #167a62;
  --amber: #97620d;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: linear-gradient(135deg, #edf2fb, #f6f1fa);
  color: var(--ink);
  font:
    14px/1.65 -apple-system,
    "Microsoft YaHei",
    "PingFang SC",
    sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
button,
input,
select,
textarea {
  border: 1px solid var(--line);
  border-radius: 9px;
}
button {
  background: white;
  color: var(--ink);
  padding: 8px 13px;
  transition: background 0.15s;
}
button:hover {
  background: #f2f5ff;
}
button.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
button.primary:hover {
  background: #3654c4;
}
button.danger {
  color: var(--danger);
  border-color: #edbfc8;
  background: #fff5f6;
}
button.small {
  font-size: 12px;
  padding: 5px 9px;
}
button.link {
  padding: 0;
  border: 0;
  color: #3d5fcb;
  background: none;
  text-align: left;
  font-weight: 650;
}
input,
select,
textarea {
  padding: 9px 11px;
  background: white;
  color: var(--ink);
  max-width: 100%;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid #ccd7ff;
  outline-offset: 1px;
}
input[type="checkbox"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
}
textarea {
  resize: vertical;
  min-height: 90px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font-size: 24px;
  line-height: 1.4;
}
h2 {
  font-size: 19px;
}
h3 {
  font-size: 16px;
}
a {
  color: #355dc6;
}
.loading {
  padding: 15vh 20px;
  text-align: center;
  color: var(--muted);
}
.shell {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 100vh;
}
.sidebar {
  background: #ffffffb8;
  border-right: 1px solid var(--line);
  padding: 27px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding: 0 6px;
}
.brand img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  background: white;
  border-radius: 8px;
}
.brand strong {
  font-size: 23px;
  letter-spacing: 4px;
}
.brand small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1px;
}
.nav-button {
  border: 0;
  background: none;
  text-align: left;
  padding: 11px 13px;
  color: #56677d;
  display: flex;
  gap: 9px;
  align-items: center;
}
.nav-button.active {
  background: #e8edff;
  color: #3455be;
  font-weight: 700;
}
.nav-bottom {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 15px;
}
.main {
  min-width: 0;
  padding: 26px 32px 60px;
}
.topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 24px;
}
.topline h1 {
  margin: 0;
}
.subtitle {
  font-size: 12px;
  color: var(--muted);
  margin-top: 5px;
}
.top-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 3px 9px;
  font-size: 11px;
  background: #eef2ff;
  color: #4a5c9a;
}
.pill.good {
  background: #e4f4ee;
  color: #166f56;
}
.pill.warn {
  background: #fff1d7;
  color: #8b5c0e;
}
.pill.bad {
  background: #fde9ee;
  color: #aa2642;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.toolbar {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  align-items: center;
  background: #ffffffc9;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px;
  margin-bottom: 18px;
}
.toolbar input.search {
  flex: 1;
  min-width: 180px;
}
.toolbar select {
  max-width: 180px;
}
.toolbar .view-switch {
  margin-left: auto;
  display: flex;
  gap: 4px;
}
.toolbar .selected {
  background: #e9edff;
  color: #3555bf;
  border-color: #c7d3ff;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 16px;
}
.customer-card {
  cursor: pointer;
  border: 1px solid var(--line);
  background: #ffffffd9;
  border-radius: 15px;
  padding: 19px;
  box-shadow: 0 7px 21px #243b6110;
  min-width: 0;
  position: relative;
}
.customer-card h3 {
  margin: 0 32px 5px 0;
  font-size: 16px;
  word-break: break-word;
}
.card-meta {
  color: var(--muted);
  font-size: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.card-footer {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  border-top: 1px dashed var(--line);
  padding-top: 11px;
  margin-top: 13px;
  color: var(--muted);
  font-size: 12px;
}
.favorite {
  position: absolute;
  top: 12px;
  right: 13px;
  border: 0;
  padding: 0 3px;
  font-size: 21px;
  color: #9ba6bb;
  background: none;
}
.favorite.on {
  color: #b47c13;
}
.list-wrap {
  width: 100%;
  overflow: auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.list-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}
.list-wrap th,
.list-wrap td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid #edf0f6;
  vertical-align: top;
}
.list-wrap th {
  background: #f4f7fd;
  color: #576b89;
  font-size: 12px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.list-wrap td {
  font-size: 13px;
  word-break: break-word;
}
.list-wrap tbody tr:last-child td {
  border-bottom: 0;
}
.list-wrap tbody tr:hover {
  background: #fafbff;
}
.list-wrap .operations {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  min-width: 110px;
}
.list-wrap .number {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.empty {
  padding: 45px 20px;
  text-align: center;
  color: var(--muted);
  background: white;
  border: 1px dashed #cbd5e5;
  border-radius: 13px;
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.stat {
  background: #ffffffd9;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 15px 18px;
}
.stat .value {
  font-size: 25px;
  font-weight: 750;
  color: #2b4a91;
  font-variant-numeric: tabular-nums;
}
.stat .label {
  font-size: 12px;
  color: var(--muted);
}
.pagination {
  display: flex;
  justify-content: center;
  gap: 15px;
  align-items: center;
  margin: 20px 0;
  color: var(--muted);
  font-size: 12px;
}
.panel {
  background: #ffffffdf;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 21px;
  margin-bottom: 18px;
  min-width: 0;
}
.panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.panel-title h2,
.panel-title h3 {
  margin: 0;
}
.muted {
  color: var(--muted);
}
.small-note {
  font-size: 12px;
  color: var(--muted);
  white-space: pre-wrap;
}
.notice {
  padding: 12px 15px;
  border: 1px solid #cdd9f2;
  background: #edf3ff;
  border-radius: 10px;
  margin: 12px 0;
  color: #35537f;
  font-size: 13px;
  white-space: pre-wrap;
}
.notice.warning {
  background: #fff6e4;
  border-color: #efd7a6;
  color: #865b16;
}
.notice.error {
  background: #fff0f3;
  border-color: #efc6d0;
  color: #a32d45;
}
.detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.detail-header h1 {
  margin-bottom: 5px;
  word-break: break-word;
}
.detail-actions,
.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.fact {
  padding: 10px 12px;
  background: #f4f7fc;
  border-radius: 9px;
  overflow-wrap: anywhere;
}
.fact .label {
  font-size: 11px;
  color: var(--muted);
}
.fact .value {
  margin-top: 2px;
  white-space: pre-wrap;
}
.timeline {
  border-left: 2px solid #dae3f4;
  margin-left: 5px;
  padding-left: 20px;
}
.timeline-item {
  position: relative;
  margin: 15px 0;
  padding: 12px 15px;
  background: #f6f8fd;
  border-radius: 9px;
}
.timeline-item:before {
  content: "";
  position: absolute;
  left: -26px;
  top: 18px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #6885d7;
}
.timeline-item .content {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.chart-box {
  background: white;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 18px;
  min-width: 0;
}
.chart-box h3 {
  font-size: 14px;
}
.chart-box svg {
  display: block;
  width: 100%;
  height: auto;
}
.chart-legend {
  font-size: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.legend-mark {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
  margin-right: 4px;
}
.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 15px;
}
.staff-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 17px;
}
.staff-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.staff-score {
  font-size: 30px;
  font-weight: 750;
  color: var(--accent);
  margin: 8px 0;
}
.dimension {
  margin-top: 11px;
}
.dimension-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.bar-track {
  height: 6px;
  background: #e9eef8;
  border-radius: 8px;
  margin-top: 5px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: #657cdb;
  border-radius: 8px;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 15px;
}
.admin-tile {
  text-align: left;
  padding: 22px;
  border-radius: 13px;
  background: white;
}
.admin-tile strong {
  display: block;
  font-size: 17px;
  margin-bottom: 5px;
}
.admin-tile span {
  font-size: 12px;
  color: var(--muted);
}
.overlay {
  position: fixed;
  inset: 0;
  background: #16243e66;
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.modal {
  background: #fff;
  border-radius: 17px;
  width: min(760px, 96vw);
  max-height: 92vh;
  overflow: auto;
  box-shadow: 0 20px 70px #17294244;
  padding: 25px;
}
.modal.wide {
  width: min(1160px, 96vw);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  margin-bottom: 18px;
}
.modal-header h2 {
  margin: 0;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 23px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.form-field {
  min-width: 0;
}
.form-field.wide {
  grid-column: 1/-1;
}
.form-field label {
  display: block;
  font-size: 12px;
  color: #566980;
  margin-bottom: 5px;
}
.form-field input:not([type="checkbox"]),
.form-field select,
.form-field textarea {
  width: 100%;
}
.form-field select[multiple] {
  min-height: 110px;
}
.form-field .hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
}
.check-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}
.checks {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}
.check-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
}
.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background:
    radial-gradient(ellipse at 20% 20%, #d5def9, transparent 60%),
    linear-gradient(130deg, #edf2fa, #f7eff9);
}
.auth-card {
  width: min(430px, 96vw);
  background: #ffffffed;
  border: 1px solid white;
  box-shadow: 0 20px 70px #33456822;
  border-radius: 20px;
  padding: 35px;
}
.auth-card .brand {
  justify-content: center;
  margin-bottom: 25px;
}
.auth-card h1 {
  text-align: center;
  font-size: 20px;
}
.auth-card label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin: 14px 0 5px;
}
.auth-card input {
  width: 100%;
}
.auth-card button.primary {
  width: 100%;
  margin-top: 20px;
}
.auth-error {
  color: var(--danger);
  font-size: 13px;
  margin: 12px 0;
}
.auth-card .small-note {
  text-align: center;
  margin-top: 15px;
}
.salary-table {
  overflow: auto;
  max-height: 62vh;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.salary-table table {
  border-collapse: collapse;
  min-width: 1300px;
  width: 100%;
}
.salary-table th,
.salary-table td {
  padding: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  white-space: nowrap;
}
.salary-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #edf2fc;
  text-align: left;
}
.salary-table th:first-child {
  left: 0;
  z-index: 3;
}
.salary-table td:first-child {
  position: sticky;
  left: 0;
  background: white;
  z-index: 1;
}
.salary-table input {
  width: 87px;
  padding: 6px;
}
.salary-table input[type="date"] {
  width: 130px;
}
.salary-table .name-input {
  width: 105px;
}
.conflict pre,
.audit-detail {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12px/1.6 inherit;
  background: #f5f7fb;
  padding: 12px;
  border-radius: 8px;
  max-height: 280px;
  overflow: auto;
}
.conflict-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: #20334cee;
  color: white;
  border-radius: 11px;
  padding: 11px 18px;
  z-index: 2000;
  max-width: 90vw;
  box-shadow: 0 5px 20px #0002;
  display: none;
}
#toast.show {
  display: block;
}
.tab-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin: 15px 0;
}
.tab-row button.active {
  background: #e7edff;
  color: #3456bf;
  border-color: #c5d2fd;
}
.inline-date {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.inline-date input {
  max-width: 170px;
}
.save-status {
  font-size: 12px;
  color: var(--muted);
}
.callout-list {
  padding-left: 20px;
  max-height: 220px;
  overflow: auto;
}
.responsive-note {
  display: none;
}
@media (max-width: 1000px) {
  .shell {
    grid-template-columns: 170px minmax(0, 1fr);
  }
  .main {
    padding: 24px 20px;
  }
  .sidebar {
    padding: 23px 10px;
  }
  .chart-grid {
    grid-template-columns: 1fr;
  }
  .topline {
    align-items: flex-start;
  }
}
@media (max-width: 720px) {
  .shell {
    display: block;
  }
  .sidebar {
    height: auto;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    gap: 4px;
  }
  .sidebar .brand {
    width: 100%;
    margin-bottom: 6px;
  }
  .sidebar .nav-button {
    padding: 7px 10px;
    font-size: 12px;
  }
  .nav-bottom {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    gap: 4px;
  }
  .main {
    padding: 20px 13px 45px;
  }
  .topline {
    flex-direction: column;
    margin-bottom: 15px;
  }
  .topline h1 {
    font-size: 21px;
  }
  .top-actions {
    width: 100%;
  }
  .toolbar {
    padding: 10px;
    gap: 7px;
  }
  .toolbar input.search {
    width: 100%;
    flex-basis: 100%;
  }
  .toolbar select {
    flex: 1;
    min-width: 110px;
    max-width: none;
  }
  .toolbar .view-switch {
    margin-left: 0;
  }
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stat {
    padding: 12px;
  }
  .stat .value {
    font-size: 22px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-field.wide {
    grid-column: auto;
  }
  .modal {
    padding: 18px;
  }
  .overlay {
    padding: 10px;
  }
  .panel {
    padding: 16px;
  }
  .cards {
    grid-template-columns: 1fr;
  }
  .list-wrap th,
  .list-wrap td {
    padding: 10px;
  }
  .list-wrap .minor {
    display: none;
  }
  .list-wrap table {
    min-width: 570px;
  }
  .conflict-grid {
    grid-template-columns: 1fr;
  }
  .responsive-note {
    display: block;
  }
  .detail-header {
    flex-direction: column;
  }
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media print {
  .sidebar,
  .top-actions,
  .toolbar,
  .row-actions,
  button {
    display: none;
  }
  body {
    background: white;
  }
  .shell {
    display: block;
  }
  .main {
    padding: 0;
  }
  .panel,
  .chart-box {
    break-inside: avoid;
    box-shadow: none;
  }
  .list-wrap {
    overflow: visible;
  }
  .list-wrap table {
    min-width: 0;
  }
  #toast {
    display: none !important;
  }
}
.chart-scroll {
  overflow-x: auto;
}
.province-panel .list-wrap {
  max-height: 500px;
}
.province-panel th:first-child,
.province-panel td:first-child {
  position: sticky;
  left: 0;
  background: #fff;
  z-index: 1;
}
.province-panel th:first-child {
  background: #f4f7fd;
  z-index: 3;
}

/* The classic layout uses the same live views with the V4.3.3 visual language. */
.primary-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.layout-toggle {
  font-weight: 700;
}
.classic-avatar {
  display: none;
}
body[data-layout="classic"] {
  --accent: #3b82f6;
  --purple: #8b5cf6;
  --ink: #1f2d3d;
  --muted: #5b6b7b;
  --line: #ffffffbf;
  --paper: #ffffffb3;
  background:
    radial-gradient(1200px 600px at 80% -10%, #3b82f62e, transparent 60%),
    radial-gradient(1000px 500px at 0% 110%, #8b5cf629, transparent 60%),
    linear-gradient(160deg, #e8eef7, #f6eefb);
  min-height: 100vh;
}
body[data-layout="classic"] .shell {
  display: block;
  max-width: 1360px;
  margin: auto;
  padding: 20px;
}
body[data-layout="classic"] .sidebar {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  height: auto;
  top: 12px;
  z-index: 20;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #ffffff8c;
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 10px 30px #1f2d3d14;
}
body[data-layout="classic"] .sidebar .brand {
  margin: 0 auto 0 0;
}
body[data-layout="classic"] .primary-nav,
body[data-layout="classic"] .nav-bottom {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  border: 0;
  margin: 0;
  border-radius: 12px;
  background: #1f2d3d0f;
}
body[data-layout="classic"] .nav-button {
  padding: 6px 10px;
  font-size: 13px;
  border-radius: 9px;
}
body[data-layout="classic"] .nav-button.active {
  background: white;
  color: #2368bc;
  box-shadow: 0 2px 8px #1f2d3d1f;
}
body[data-layout="classic"] .layout-toggle,
body[data-layout="classic"] button.primary {
  color: white;
  background: linear-gradient(135deg, #2563bd, #7752ca);
  box-shadow: 0 4px 12px #5865f248;
}
body[data-layout="classic"] .main {
  padding: 16px 0 40px;
}
body[data-layout="classic"] .toolbar,
body[data-layout="classic"] .customer-card,
body[data-layout="classic"] .stat,
body[data-layout="classic"] .panel,
body[data-layout="classic"] .chart-box,
body[data-layout="classic"] .staff-card,
body[data-layout="classic"] .list-wrap,
body[data-layout="classic"] .modal {
  background: #ffffffa6;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 6px 18px #1f2d3d10;
}
body[data-layout="classic"] .modal {
  background: #f9faff;
}
body[data-layout="classic"] .cards {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
body[data-layout="classic"] .card-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 30px;
}
body[data-layout="classic"] .classic-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #2563bd, #7752ca);
  color: white;
  font-size: 16px;
  font-weight: 800;
}
body[data-layout="classic"] .card-footer {
  border-top: 1px dashed #1f2d3d26;
}
@media (max-width: 720px) {
  .primary-nav {
    flex-direction: row;
    flex-wrap: wrap;
  }
  body[data-layout="classic"] .shell {
    padding: 10px;
  }
  body[data-layout="classic"] .sidebar {
    position: static;
    padding: 10px;
    gap: 8px;
  }
}

/* Top navigation workspace */
body[data-layout="classic"] {
  --ink: #172847;
  --muted: #51627c;
  --accent: #3458c4;
  --line: #dce5f2;
  background: linear-gradient(155deg, #e9effb, #f4f6fc 55%, #edf1fa);
}
body[data-layout="classic"] .sidebar {
  background: #fbfdff;
  box-shadow: 0 6px 20px #293b6510;
}
body[data-layout="classic"] .sidebar .brand strong {
  color: #263b70;
}
body[data-layout="classic"] .primary-nav {
  background: #edf2fb;
  padding: 4px;
}
body[data-layout="classic"] .nav-button.active {
  background: #fff;
  color: #294ca9;
}
body[data-layout="classic"] .nav-bottom {
  background: transparent;
}
body[data-layout="classic"] .topline {
  background: linear-gradient(115deg, #e0ebff, #ece7fc 70%, #f5f2ff);
  border: 1px solid #d5e0f6;
  border-radius: 18px;
  padding: clamp(16px, 2.1vw, 30px);
  margin-bottom: 16px;
}
body[data-layout="classic"] .topline h1 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .015em;
}
body[data-layout="classic"] .topline .subtitle {
  margin-top: 6px;
}
body[data-layout="classic"] .top-actions button {
  min-height: 34px;
}
body[data-layout="classic"] .toolbar {
  padding: 12px 14px;
  background: #fff;
}
body[data-layout="classic"] .toolbar :is(input, select) {
  background-color: #f7f9fd;
  border-color: #dce5f2;
}
body[data-layout="classic"] .toolbar .view-switch {
  padding: 3px;
  border-radius: 10px;
  background: #eef2fb;
}
body[data-layout="classic"] .toolbar .view-switch button {
  border: 0;
}
body[data-layout="classic"] .toolbar .view-switch .selected {
  background: #fff;
  color: #294ca9;
  box-shadow: 0 1px 4px #293b651a;
}
body[data-layout="classic"] .cards {
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}
body[data-layout="classic"] .customer-card {
  padding: 17px;
  background: #fff;
  border-color: #dce5f2;
  transition: box-shadow .18s, border-color .18s;
}
body[data-layout="classic"] .customer-card:hover,
body[data-layout="classic"] .customer-card:focus-within {
  border-color: #adbfea;
  box-shadow: 0 8px 22px #293b651a;
}
body[data-layout="classic"] .card-heading .link {
  color: #253d76;
  font-size: 16px;
  font-weight: 750;
  text-align: left;
  overflow-wrap: anywhere;
  min-width: 0;
}
body[data-layout="classic"] .classic-avatar {
  background: linear-gradient(140deg, #3458b9, #6852bd);
}
body[data-layout="classic"] .card-meta {
  min-height: 22px;
}
body[data-layout="classic"] .card-count {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  background: #eef3ff;
  color: #425782;
  border-radius: 8px;
  padding: 4px 9px;
}
body[data-layout="classic"] .card-count strong {
  font-size: 14px;
  color: #263b70;
  font-variant-numeric: tabular-nums;
}
body[data-layout="classic"] .card-footer {
  padding-top: 10px;
  border-color: #dce5f2;
}
body[data-layout="classic"] :is(.panel, .stat, .chart-box, .staff-card, .list-wrap, .admin-tile) {
  background: #fff;
}
@media (max-width: 720px) {
  body[data-layout="classic"] .topline {
    align-items: stretch;
    gap: 12px;
  }
  body[data-layout="classic"] .top-actions {
    justify-content: flex-start;
  }
}

/* Project workspace, inspired by the colored overview and badges in V4.3.3. */
body[data-layout="classic"] .project-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 10px;
  margin: 8px 0 16px;
}
body[data-layout="classic"] .tone-blue { --tone: #2554aa; --tint: #e5eeff; }
body[data-layout="classic"] .tone-indigo { --tone: #443da6; --tint: #ebeaff; }
body[data-layout="classic"] .tone-green { --tone: #15634b; --tint: #dbf4e9; }
body[data-layout="classic"] .tone-purple { --tone: #673ba7; --tint: #f0e7fd; }
body[data-layout="classic"] .tone-teal { --tone: #0d666b; --tint: #dff4f3; }
body[data-layout="classic"] .tone-orange { --tone: #914115; --tint: #fff0e2; }
body[data-layout="classic"] .tone-amber { --tone: #815509; --tint: #fff1cf; }
body[data-layout="classic"] .tone-rose { --tone: #973348; --tint: #fbe5ec; }
body[data-layout="classic"] .project-overview-item {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  background: linear-gradient(125deg, var(--tint), #fff 80%);
  border: 1px solid var(--line);
  border-radius: 12px;
}
body[data-layout="classic"] .overview-mark {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 32px;
  border-radius: 9px;
  color: var(--tone);
  background: var(--tint);
  font-weight: 800;
}
body[data-layout="classic"] .project-overview-item .label {
  font-size: 12px;
  color: var(--muted);
}
body[data-layout="classic"] .project-overview-item strong {
  display: block;
  color: var(--tone);
  font-size: 18px;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
body[data-layout="classic"] .project-card .classic-avatar {
  background: linear-gradient(135deg, #ad520e, #c44864);
}
body[data-layout="classic"] .project-stage {
  background: var(--tint);
  color: var(--tone);
  font-weight: 700;
}
body[data-layout="classic"] .project-finance {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
body[data-layout="classic"] .project-finance .fact {
  padding: 8px;
  background: #edf1fd;
}
body[data-layout="classic"] .project-finance .fact:nth-child(2) {
  background: #e8f6f0;
  color: #15634b;
}
body[data-layout="classic"] .project-finance .fact:nth-child(3) {
  background: #fff1e7;
  color: #914115;
}
body[data-layout="classic"] .project-finance .value {
  font-size: 15px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
@media (max-width: 480px) {
  body[data-layout="classic"] .project-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  body[data-layout="classic"] .project-overview-item {
    padding: 8px;
    gap: 6px;
  }
}

/* Project workspace: compact heading, one overview strip and lighter cards. */
body[data-layout="classic"] .main:has(.workspace-toolbar) .topline {
  background: transparent;
  border: 0;
  padding: 5px 2px 9px;
  margin-bottom: 8px;
}
body[data-layout="classic"] .main:has(.workspace-toolbar) .topline h1 {
  font-size: 26px;
}
body[data-layout="classic"] .workspace-toolbar {
  border-radius: 12px;
  margin-bottom: 12px;
  padding: 10px 12px;
}
body[data-layout="classic"] .workspace-toolbar :is(input, select, button) {
  min-height: 34px;
  padding-block: 5px;
}
body[data-layout="classic"] .workspace-toolbar input[type="date"] {
  width: 132px;
  min-width: 0;
}
body[data-layout="classic"] .main:has(.workspace-toolbar) .project-overview {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  padding: 9px 0;
  background: #fdfdff;
  border: 1px solid #dce5f2;
  border-radius: 13px;
  box-shadow: 0 4px 12px #243b6108;
}
body[data-layout="classic"] .project-overview .project-overview-item {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 6px 13px;
}
body[data-layout="classic"] .project-overview-item + .project-overview-item {
  border-left: 1px solid #e2e8f4;
}
body[data-layout="classic"] .project-overview-item strong {
  color: #172847;
}
body[data-layout="classic"] .project-card {
  padding: 15px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, #fff 72%, #f8faff);
}
body[data-layout="classic"] .project-card .card-heading {
  align-items: flex-start;
}
body[data-layout="classic"] .project-card .card-heading .link {
  font-size: 15px;
  line-height: 1.45;
  align-self: center;
}
body[data-layout="classic"] .project-card .classic-avatar {
  background: #fff0dd;
  color: #8c4819;
  flex-basis: 36px;
  height: 36px;
}
body[data-layout="classic"] .project-card .card-meta {
  margin: 9px 0 10px;
  row-gap: 4px;
}
body[data-layout="classic"] .project-card .project-finance {
  margin-top: auto;
  padding: 8px 2px;
  border-top: 1px solid #edf0f7;
  border-bottom: 1px solid #edf0f7;
  gap: 0;
}
body[data-layout="classic"] .project-finance .fact {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 1px 8px;
}
body[data-layout="classic"] .project-finance .fact + .fact {
  border-left: 1px solid #e6ebf5;
}
body[data-layout="classic"] .project-card .card-footer {
  border-top: 0;
  padding-top: 8px;
  margin-top: 0;
  gap: 6px;
  flex-wrap: wrap;
}
@media (max-width: 1060px) {
  body[data-layout="classic"] .main:has(.workspace-toolbar) .project-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 6px;
  }
}
@media (max-width: 560px) {
  body[data-layout="classic"] .main:has(.workspace-toolbar) .project-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  body[data-layout="classic"] .project-overview .project-overview-item {
    padding-inline: 8px;
  }
}

@media (min-width: 1200px) {
  body[data-layout="classic"] .workspace-toolbar {
    column-gap: 7px;
  }
  body[data-layout="classic"] .workspace-toolbar select {
    max-width: 120px;
  }
  body[data-layout="classic"] .workspace-toolbar input[type="date"] {
    width: 120px;
  }
}
body[data-layout="classic"] .project-card .project-finance .fact {
  background: transparent;
}


/* Shared top-navigation directory cards and summary strips. */
@media (min-width: 1061px) {
  body[data-layout="classic"] .main:has(.workspace-toolbar) .overview-customer {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  body[data-layout="classic"] .main:has(.workspace-toolbar) .overview-contact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
body[data-layout="classic"] :is(.customer-entity-card, .contact-entity-card) {
  display: flex;
  flex-direction: column;
  padding: 15px;
  border-radius: 14px;
  background: linear-gradient(160deg, #fff 72%, #f8faff);
}
body[data-layout="classic"] .customer-entity-card .classic-avatar {
  background: #eee9fc;
  color: #5a3b99;
}
body[data-layout="classic"] .contact-entity-card .classic-avatar {
  background: #e4f1fc;
  color: #215a94;
}
body[data-layout="classic"] .relationship-tag {
  background: var(--tint);
  color: var(--tone);
  font-weight: 700;
}
body[data-layout="classic"] :is(.customer-entity-card, .contact-entity-card) .card-meta {
  margin: 9px 0 8px;
  row-gap: 4px;
  overflow-wrap: anywhere;
}
body[data-layout="classic"] .relationship-info {
  padding-bottom: 9px;
  overflow-wrap: anywhere;
}
body[data-layout="classic"] :is(.customer-entity-card, .contact-entity-card) .card-footer {
  margin-top: auto;
  flex-wrap: wrap;
  gap: 6px;
}

.login-captcha-row {
  display: grid;
  grid-template-columns: minmax(64px, 1fr) 132px auto;
  gap: 8px;
  align-items: center;
}
.login-captcha-row input {
  min-width: 0;
}
.login-captcha-row img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}
.login-captcha-row button {
  white-space: nowrap;
}
@media (max-width: 380px) {
  .login-captcha-row { grid-template-columns: minmax(65px, 1fr) minmax(90px, 132px); }
  .login-captcha-row button { grid-column: 2; justify-self: end; }
}

/* Details keep the originating list mounted underneath the right-side drawer. */
body.detail-open {
  overflow: hidden;
}
.detail-shade {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  justify-content: flex-end;
  background: #16243e55;
}
.detail-drawer {
  width: min(720px, 100vw);
  height: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0 18px 24px;
  background: #f7f9fe;
  box-shadow: -14px 0 48px #17294233;
  outline: none;
}
.drawer-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  margin-bottom: 12px;
  background: #f7f9fe;
  border-bottom: 1px solid #dce5f2;
}
.drawer-toolbar strong {
  color: #253d76;
  font-size: 15px;
}
@media (max-width: 600px) {
  .detail-drawer { padding-inline: 10px; }
  .drawer-toolbar .detail-actions { gap: 5px; }
}