/* HeartFlow inner pages light SaaS skin. Visual-only, avoids layout-sensitive rules. */
:root {
  --hf-page: #faf8f2;
  --hf-panel: #fffdf8;
  --hf-panel-soft: #f7f5ed;
  --hf-line: #dfddd4;
  --hf-line-soft: #ece8dd;
  --hf-text: #171a14;
  --hf-muted: #686f64;
  --hf-green: #55b74a;
  --hf-green-dark: #2f8f32;
  --hf-red: #d45d54;
  --hf-orange: #d97706;
}

html, body {
  background-color: var(--hf-page) !important;
  color: var(--hf-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
}

.x-body {
  background: var(--hf-page) !important;
  padding: 20px 24px !important;
}

.x-so,
xblock {
  background: var(--hf-panel) !important;
  border: 1px solid var(--hf-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.x-so {
  margin-bottom: 10px !important;
}

xblock {
  margin-bottom: 12px !important;
}

.layui-input,
.layui-textarea,
.layui-select,
.layui-form-select .layui-input {
  background-color: var(--hf-panel) !important;
  border-color: #d8d5c8 !important;
  border-radius: 8px !important;
  color: var(--hf-text) !important;
}

.layui-input::placeholder,
.layui-textarea::placeholder {
  color: #8b9188 !important;
}

.layui-input:focus,
.layui-textarea:focus,
.layui-form-selected .layui-input {
  background-color: #ffffff !important;
  border-color: var(--hf-green) !important;
  box-shadow: 0 0 0 3px rgba(85, 183, 74, .12) !important;
}

.layui-form-select dl {
  border-color: var(--hf-line) !important;
  border-radius: 8px !important;
  box-shadow: 0 12px 24px rgba(38, 35, 24, .10) !important;
  overflow: hidden !important;
}

.layui-form-select dl dd.layui-this {
  background-color: var(--hf-green) !important;
}

.layui-btn {
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  background-color: var(--hf-green) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

.layui-btn:hover {
  background-color: var(--hf-green-dark) !important;
  color: #ffffff !important;
}

.layui-btn-normal {
  background-color: var(--hf-green) !important;
}

.layui-btn-danger {
  background-color: #fffdf8 !important;
  color: #a33b35 !important;
  border-color: #ead0ca !important;
}

.layui-btn-danger:hover {
  background-color: #f8ebe8 !important;
  color: #8f2f2a !important;
}

table .layui-btn,
table .layui-btn-danger {
  background-color: #fff8ed !important;
  color: #a75609 !important;
  border-color: #edd5b4 !important;
  box-shadow: none !important;
}

table .layui-btn:hover,
table .layui-btn-danger:hover {
  background-color: #f7ead7 !important;
  color: #8a4306 !important;
}

.layui-table {
  margin-top: 0 !important;
  background-color: var(--hf-panel) !important;
  border-color: var(--hf-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.layui-table thead tr,
.layui-table thead th {
  background-color: var(--hf-panel-soft) !important;
  color: #6f756b !important;
  border-color: var(--hf-line) !important;
  font-weight: 800 !important;
}

.layui-table td {
  color: #454b42 !important;
  border-color: var(--hf-line-soft) !important;
}

.layui-table tbody tr:nth-child(even) td {
  background-color: #fffdfa !important;
}

.layui-table tbody tr:hover td {
  background-color: #f2f7ee !important;
}

.green_cell {
  color: #238329 !important;
  font-weight: 800 !important;
}

.red_cell {
  color: #b42318 !important;
  font-weight: 800 !important;
}

.layui-form-checkbox[lay-skin=primary] {
  border-color: #cfcabf !important;
  border-radius: 5px !important;
}

.layui-form-checked[lay-skin=primary] i,
.layui-form-onswitch {
  background-color: var(--hf-green) !important;
  border-color: var(--hf-green) !important;
}

.page a,
.page span {
  border-radius: 8px !important;
  background: var(--hf-panel) !important;
  border-color: var(--hf-line) !important;
}

.page span.current,
.page .pagination li.active span {
  background-color: var(--hf-green) !important;
  color: #ffffff !important;
}

.floating-button {
  background: var(--hf-green) !important;
  box-shadow: 0 10px 24px rgba(85, 183, 74, .28) !important;
}

/* Reference refinement: quieter mature SaaS surface. Visual-only. */
.x-body {
  padding: 18px 28px 28px !important;
}

.layui-row {
  background: transparent !important;
}

.x-so {
  padding: 0 0 14px !important;
  margin: 0 0 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hf-line) !important;
  border-radius: 0 !important;
}

.x-so .layui-input-inline,
.x-so > .layui-input,
.x-so > .layui-textarea,
.x-so > .layui-btn {
  margin-top: 4px !important;
  margin-bottom: 8px !important;
}

.x-so .layui-input,
.x-so .layui-textarea,
.x-so .layui-form-select .layui-input {
  height: 40px !important;
  min-height: 40px !important;
  border-radius: 8px !important;
  background: #fffefa !important;
  border-color: #d9d6ca !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55) !important;
}

.x-so .layui-input:hover,
.x-so .layui-textarea:hover,
.x-so .layui-form-select .layui-input:hover {
  border-color: #c9c4b7 !important;
}

.x-so .layui-btn {
  height: 40px !important;
  min-width: 46px !important;
  border-radius: 8px !important;
}

xblock {
  padding: 8px 0 14px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hf-line) !important;
  border-radius: 0 !important;
}

xblock .layui-btn {
  height: 36px !important;
  line-height: 34px !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
}

xblock .layui-btn-normal,
xblock .resident-button {
  background: #eef8eb !important;
  color: #247f2b !important;
  border-color: #cce8c5 !important;
}

xblock .layui-btn-normal:hover,
xblock .resident-button:hover {
  background: #e2f3dc !important;
  color: #17651e !important;
}

xblock .layui-btn-danger {
  background: #fff7f4 !important;
  color: #a8463e !important;
  border-color: #ecd0ca !important;
}

xblock .layui-btn-danger:hover {
  background: #f9ebe7 !important;
  color: #8c302a !important;
}

#total_size,
.x-right {
  color: #4f554c !important;
  font-weight: 700 !important;
}

.layui-table {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: transparent !important;
}

.layui-table thead tr,
.layui-table thead th {
  height: 42px !important;
  background: #faf8f2 !important;
  color: #7b8077 !important;
  border-color: #e3dfd3 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.layui-table td {
  height: 48px !important;
  background: #faf8f2 !important;
  color: #3f453d !important;
  border-color: #ebe7dc !important;
  font-size: 14px !important;
}

.layui-table tbody tr:nth-child(even) td {
  background: #fbfaf5 !important;
}

.layui-table tbody tr:hover td {
  background: #f1f6ed !important;
}

.layui-table th:first-child,
.layui-table td:first-child {
  border-left: 0 !important;
}

.layui-table th:last-child,
.layui-table td:last-child {
  border-right: 0 !important;
}

table .layui-btn,
table .layui-btn-danger,
table .layui-btn-normal {
  height: 30px !important;
  line-height: 28px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  background: #fff8ed !important;
  color: #9a530d !important;
  border-color: #ead1ad !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

table .layui-btn:hover,
table .layui-btn-danger:hover,
table .layui-btn-normal:hover {
  background: #f8ecd9 !important;
  color: #7d4108 !important;
}

.floating-button {
  width: 52px !important;
  height: 52px !important;
  line-height: 52px !important;
  right: 26px !important;
  bottom: 42px !important;
  border-radius: 16px !important;
  background: #55b74a !important;
  border-color: #55b74a !important;
  box-shadow: 0 12px 24px rgba(85,183,74,.24) !important;
}

.page {
  padding: 14px 0 !important;
}

/* Page title area: adds hierarchy above filters without touching logic. */
.page-titlebar {
  padding: 20px 0 18px !important;
  margin: 0 0 16px !important;
  border-bottom: 1px solid var(--hf-line) !important;
  background: transparent !important;
}

.page-titlebar .page-breadcrumb {
  margin-bottom: 8px !important;
  color: #8a9186 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
}

.page-titlebar h1 {
  margin: 0 !important;
  color: #151a13 !important;
  font-size: 28px !important;
  line-height: 36px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

.page-titlebar p {
  margin: 6px 0 0 !important;
  color: #687064 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  font-weight: 600 !important;
}

.page-titlebar + .layui-row .x-so {
  padding-top: 0 !important;
}

/* User account page alignment. */
.hf-user-page .user-filter {
  padding: 0 0 14px !important;
  margin-bottom: 10px !important;
  border-bottom: 1px solid var(--hf-line) !important;
}

.hf-user-page .layui-form-item {
  margin-bottom: 0 !important;
}

.hf-user-page .layui-inline {
  margin: 4px 14px 8px 0 !important;
}

.hf-user-page .layui-form-label {
  width: auto !important;
  padding: 9px 14px 9px 0 !important;
  color: #3f453d !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 22px !important;
}

.hf-user-page .layui-input-inline {
  width: 210px !important;
}

.hf-user-page .layui-form-mid {
  color: #8a9186 !important;
  font-weight: 700 !important;
}

.hf-user-page xblock {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 42px !important;
}

.hf-user-page xblock .layui-btn {
  background: #eef8eb !important;
  color: #247f2b !important;
  border-color: #cce8c5 !important;
}

.hf-user-page xblock .layui-btn:hover {
  background: #e2f3dc !important;
  color: #17651e !important;
}

.hf-user-page xblock .x-right {
  margin-left: auto !important;
  color: #4f554c !important;
}

.hf-user-page .layui-table td span.layui-btn-xs {
  height: 26px !important;
  line-height: 24px !important;
  padding: 0 9px !important;
  border-radius: 7px !important;
  border: 1px solid transparent !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.hf-user-page .layui-table td span.layui-btn-normal {
  background: #eaf7e7 !important;
  color: #287d2d !important;
  border-color: #cce8c5 !important;
}

.hf-user-page .layui-table td span.layui-btn-warm {
  background: #fff4e5 !important;
  color: #9a530d !important;
  border-color: #f1d4a8 !important;
}

.hf-user-page .layui-table td span.layui-btn-danger {
  background: #fff1ee !important;
  color: #a8463e !important;
  border-color: #ecd0ca !important;
}

.hf-user-page .layui-table td span.layui-btn-primary {
  background: #fffdf8 !important;
  color: #596156 !important;
  border-color: #dcd7cb !important;
}

.hf-user-page .layui-table td a.layui-btn-xs {
  height: 30px !important;
  line-height: 28px !important;
  padding: 0 10px !important;
  margin-right: 6px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.hf-user-page .layui-table td a.layui-btn-danger {
  background: #fff1ee !important;
  color: #a8463e !important;
  border-color: #ecd0ca !important;
}

.hf-user-page .layui-table td a.layui-btn-primary {
  background: #fffdf8 !important;
  color: #4f554c !important;
  border-color: #dcd7cb !important;
}

.hf-user-page .layui-table td a.layui-btn-normal {
  background: #eef8eb !important;
  color: #247f2b !important;
  border-color: #cce8c5 !important;
}

/* Shared modal/form pages opened from user management. */
.hf-form-page {
  padding: 22px 24px !important;
  background: var(--hf-page) !important;
}

.hf-form-page .layui-form {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

.hf-form-page .layui-form-item {
  margin-bottom: 14px !important;
}

.hf-form-page .layui-form-label {
  width: 92px !important;
  padding: 9px 14px 9px 0 !important;
  color: #3f453d !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 22px !important;
}

.hf-form-page .layui-input-inline {
  width: 240px !important;
}

.hf-form-page .layui-input,
.hf-form-page .layui-form-select .layui-input {
  height: 40px !important;
  border-radius: 8px !important;
  background: #fffefa !important;
  border-color: #d9d6ca !important;
  color: #171a14 !important;
}

.hf-form-page .layui-input[disabled],
.hf-form-page .layui-input[readonly] {
  background: #f4f1e8 !important;
  color: #687064 !important;
}

.hf-form-page .layui-word-aux {
  color: #8a9186 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.hf-form-page .layui-btn {
  height: 38px !important;
  line-height: 36px !important;
  padding: 0 16px !important;
  border-radius: 8px !important;
  background: #55b74a !important;
  border-color: #55b74a !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.hf-form-page .layui-btn:hover {
  background: #2f8f32 !important;
}

.hf-form-page .x-red {
  color: #b45309 !important;
}