.cc-custom-info {
  --ci-surface: color-mix(in srgb, var(--cc-surface, #ffffff) 96%, #dfe7e5);
  --ci-surface-subtle: color-mix(in srgb, var(--cc-surface, #ffffff) 88%, #d9e2e0);
  --ci-border: color-mix(in srgb, var(--cc-border, #cfd8d6) 84%, transparent);
  --ci-text: var(--cc-text, #17211f);
  --ci-muted: var(--cc-muted, #60706c);
  --ci-accent: #147d74;
  --ci-accent-soft: color-mix(in srgb, #147d74 12%, var(--ci-surface));
  --ci-amber: #a36312;
  --ci-rose: #b43c55;
  width: 100%;
  min-width: 0;
  letter-spacing: 0;
}

html[data-theme="night"] .cc-custom-info {
  --ci-surface: #151c1d;
  --ci-surface-subtle: #1b2526;
  --ci-border: #304041;
  --ci-text: #eef5f3;
  --ci-muted: #9fafab;
  --ci-accent: #55c9bb;
  --ci-accent-soft: #173331;
  --ci-amber: #e2a653;
  --ci-rose: #ed7e93;
}

.cc-custom-info__panel {
  overflow-x: clip;
  min-width: 0;
  color: var(--ci-text);
}

.cc-custom-info__panel.tab-focus:focus {
  outline: none;
}

.cc-custom-info__heading,
.cc-custom-info__heading > div,
.cc-custom-info__heading.is-compact {
  min-width: 0;
}

.cc-custom-info *,
.cc-custom-info *::before,
.cc-custom-info *::after {
  box-sizing: border-box;
}

.cc-custom-info__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ci-border);
}

.cc-custom-info__heading.is-compact {
  align-items: center;
  padding-bottom: 14px;
}

.cc-custom-info__heading h3,
.cc-custom-info__heading h4,
.cc-custom-info__heading p {
  margin: 0;
  letter-spacing: 0;
}

.cc-custom-info__heading h3 {
  font-size: 20px;
  line-height: 1.25;
}

.cc-custom-info__heading p {
  max-width: 720px;
  margin-top: 6px;
  color: var(--ci-muted);
  font-size: 13px;
  line-height: 1.65;
}

.cc-custom-info__eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--ci-accent);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.cc-custom-info .hud-button,
.cc-custom-info .mini-action,
.cc-custom-info button,
.cc-custom-info input,
.cc-custom-info textarea,
.cc-custom-info select {
  letter-spacing: 0;
}

.cc-custom-info .hud-button {
  flex: 0 0 auto;
  border-radius: 7px;
}

.cc-custom-info__notice {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  margin-top: 14px;
  padding: 9px 12px;
  border: 1px solid var(--ci-border);
  border-radius: 7px;
  background: var(--ci-surface-subtle);
  color: var(--ci-muted);
  font-size: 13px;
}

.cc-custom-info__notice.is-success {
  border-color: color-mix(in srgb, var(--ci-accent) 44%, var(--ci-border));
  color: var(--ci-accent);
}

.cc-custom-info__notice.is-error {
  border-color: color-mix(in srgb, var(--ci-rose) 50%, var(--ci-border));
  color: var(--ci-rose);
}

.cc-custom-info__notice svg,
.cc-custom-info__loading svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.cc-custom-info__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 260px;
  color: var(--ci-muted);
}

.cc-custom-info__loading svg {
  animation: ci-spin 0.9s linear infinite;
}

@keyframes ci-spin {
  to { transform: rotate(360deg); }
}

.cc-custom-info__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--ci-border);
  border-radius: 7px;
  background: var(--ci-border);
}

.cc-custom-info__metrics > div {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 16px;
  background: var(--ci-surface);
}

.cc-custom-info__metrics span {
  color: var(--ci-muted);
  font-size: 12px;
}

.cc-custom-info__metrics strong {
  overflow-wrap: anywhere;
  font-size: 21px;
  line-height: 1.2;
}

.cc-custom-info__metrics > div:last-child strong {
  font-size: 14px;
  font-weight: 650;
}

.cc-custom-info__overview-section {
  margin-top: 22px;
}

.cc-custom-info__record-mode {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  width: min(100%, 360px);
  margin-top: 14px;
  padding: 3px;
  border: 1px solid var(--ci-border);
  border-radius: 7px;
  background: var(--ci-surface-subtle);
}

.cc-custom-info__record-mode button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ci-muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.cc-custom-info__record-mode button.is-active {
  background: var(--ci-surface);
  color: var(--ci-text);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ci-border) 64%, transparent);
}

.cc-custom-info__record-mode strong {
  color: var(--ci-accent);
  font-variant-numeric: tabular-nums;
}

.cc-custom-info__overview-section > header,
.cc-custom-info__fields > header,
.cc-custom-info__records > header,
.cc-custom-info__collection-list > header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.cc-custom-info__overview-section h4,
.cc-custom-info__overview-section p,
.cc-custom-info__fields h4,
.cc-custom-info__fields p {
  margin: 0;
}

.cc-custom-info__overview-section h4,
.cc-custom-info__fields h4 {
  font-size: 14px;
}

.cc-custom-info__overview-section p,
.cc-custom-info__fields p {
  margin-top: 3px;
  color: var(--ci-muted);
  font-size: 12px;
}

.cc-custom-info__collection-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cc-custom-info__collection-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--ci-border);
  border-radius: 7px;
  background: var(--ci-surface);
  color: var(--ci-text);
  text-align: left;
  cursor: pointer;
}

.cc-custom-info__collection-chip:hover,
.cc-custom-info__collection-chip:focus-visible {
  border-color: var(--ci-accent);
  background: var(--ci-accent-soft);
}

.cc-custom-info__collection-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-custom-info__collection-chip strong {
  color: var(--ci-accent);
  font-variant-numeric: tabular-nums;
}

.cc-custom-info__recent-list,
.cc-custom-info__records > div {
  display: grid;
  gap: 6px;
}

.cc-custom-info__record {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(180px, 1.4fr) 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--ci-border);
  border-radius: 7px;
  background: var(--ci-surface);
  color: var(--ci-text);
  text-align: left;
  cursor: pointer;
}

.cc-custom-info__record:hover,
.cc-custom-info__record:focus-visible,
.cc-custom-info__record.is-selected {
  border-color: var(--ci-accent);
  background: var(--ci-accent-soft);
}

.cc-custom-info__record-main,
.cc-custom-info__record-preview {
  min-width: 0;
}

.cc-custom-info__record-main {
  display: grid;
  gap: 4px;
}

.cc-custom-info__record-main strong,
.cc-custom-info__record-main small,
.cc-custom-info__record-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-custom-info__record-main strong {
  font-size: 13px;
}

.cc-custom-info__record-main small,
.cc-custom-info__record-preview {
  color: var(--ci-muted);
  font-size: 11px;
}

.cc-custom-info__record > svg {
  width: 16px;
  height: 16px;
  color: var(--ci-muted);
}

.cc-custom-info__empty,
.cc-custom-info__error {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 150px;
  padding: 30px 18px;
  border: 1px dashed var(--ci-border);
  border-radius: 7px;
  color: var(--ci-muted);
  text-align: center;
}

.cc-custom-info__error {
  border-style: solid;
  border-color: color-mix(in srgb, var(--ci-rose) 46%, var(--ci-border));
  background: color-mix(in srgb, var(--ci-rose) 7%, transparent);
}

.cc-custom-info__empty svg,
.cc-custom-info__error svg {
  width: 24px;
  height: 24px;
  color: var(--ci-accent);
}

.cc-custom-info__error > svg {
  color: var(--ci-rose);
}

.cc-custom-info__empty strong,
.cc-custom-info__error strong {
  color: var(--ci-text);
  font-size: 14px;
}

.cc-custom-info__empty p,
.cc-custom-info__error p {
  max-width: 460px;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}

.cc-custom-info__error .hud-button {
  min-height: 40px;
}

.cc-custom-info__toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 260px) 42px;
  align-items: end;
  gap: 10px;
  margin: 14px 0;
}

.cc-custom-info__toolbar label,
.cc-custom-info__form label,
.cc-custom-info__collection-form label,
.cc-custom-info__field-row label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--ci-muted);
  font-size: 11px;
  font-weight: 650;
}

.cc-custom-info__form-grid,
.cc-custom-info__records-layout,
.cc-custom-info__collections-layout,
.cc-custom-info__field-row,
.cc-custom-info__detail > header,
.cc-custom-info__form-actions,
.cc-custom-info__collection-form footer {
  width: 100%;
  max-width: 100%;
}

.cc-custom-info__toolbar label > div {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--ci-border);
  border-radius: 7px;
  background: var(--ci-surface);
}

.cc-custom-info__toolbar label > div:focus-within {
  border-color: var(--ci-accent);
}

.cc-custom-info__toolbar label > div svg {
  width: 16px;
  height: 16px;
}

.cc-custom-info input,
.cc-custom-info textarea,
.cc-custom-info select {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--ci-border);
  border-radius: 7px;
  outline: none;
  background: var(--ci-surface);
  color: var(--ci-text);
  font: inherit;
}

.cc-custom-info input,
.cc-custom-info select {
  min-height: 42px;
  padding: 0 10px;
}

.cc-custom-info textarea {
  min-height: 74px;
  padding: 10px;
  resize: vertical;
}

.cc-custom-info input:focus,
.cc-custom-info textarea:focus,
.cc-custom-info select:focus {
  border-color: var(--ci-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ci-accent) 18%, transparent);
}

.cc-custom-info__toolbar label > div input {
  min-height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.cc-custom-info__icon-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--ci-border);
  border-radius: 7px;
  background: var(--ci-surface);
  color: var(--ci-muted);
  cursor: pointer;
}

.cc-custom-info__icon-button:hover,
.cc-custom-info__icon-button:focus-visible {
  border-color: var(--ci-accent);
  color: var(--ci-accent);
}

.cc-custom-info__icon-button svg {
  width: 17px;
  height: 17px;
}

.cc-custom-info__records-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.86fr) minmax(0, 1.14fr);
  gap: 16px;
  min-width: 0;
}

.cc-custom-info__records,
.cc-custom-info__detail-shell {
  min-width: 0;
}

.cc-custom-info__records > header,
.cc-custom-info__collection-list > header {
  color: var(--ci-muted);
  font-size: 11px;
}

.cc-custom-info__records > header strong,
.cc-custom-info__collection-list > header strong {
  color: var(--ci-text);
  font-size: 12px;
}

.cc-custom-info__records .cc-custom-info__record {
  grid-template-columns: minmax(0, 1fr) 18px;
}

.cc-custom-info__records .cc-custom-info__record-preview {
  grid-column: 1 / -1;
}

.cc-custom-info__detail-shell {
  min-height: 360px;
  padding-left: 16px;
  border-left: 1px solid var(--ci-border);
}

.cc-custom-info__detail > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ci-border);
}

.cc-custom-info__detail h3,
.cc-custom-info__detail p {
  margin: 0;
}

.cc-custom-info__detail header span {
  color: var(--ci-accent);
  font-size: 11px;
  font-weight: 700;
}

.cc-custom-info__detail h3 {
  margin-top: 5px;
  font-size: 18px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.cc-custom-info__detail header p {
  margin-top: 7px;
  color: var(--ci-muted);
  font-size: 12px;
  line-height: 1.65;
}

.cc-custom-info__detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cc-custom-info__detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 12px 0;
  color: var(--ci-muted);
  font-size: 11px;
}

.cc-custom-info__detail-meta em {
  padding: 3px 7px;
  border: 1px solid var(--ci-border);
  border-radius: 7px;
  color: var(--ci-accent);
  font-style: normal;
}

.cc-custom-info__detail-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--ci-border);
  border-radius: 7px;
  background: var(--ci-border);
}

.cc-custom-info__detail-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  background: var(--ci-surface);
}

.cc-custom-info__detail-field span {
  color: var(--ci-muted);
  font-size: 11px;
}

.cc-custom-info__detail-field strong,
.cc-custom-info__detail-field a {
  color: var(--ci-text);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.cc-custom-info__archive-warning {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ci-rose) 54%, var(--ci-border));
  border-radius: 7px;
  color: var(--ci-rose);
  font-size: 12px;
}

.cc-custom-info__archive-warning.is-restore {
  border-color: color-mix(in srgb, var(--ci-accent) 50%, var(--ci-border));
  color: var(--ci-accent);
}

.cc-custom-info__form {
  margin-top: 16px;
}

.cc-custom-info__form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cc-custom-info__form-grid .is-wide {
  grid-column: 1 / -1;
}

.cc-custom-info__vault-note {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--ci-amber) 42%, var(--ci-border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--ci-amber) 8%, var(--ci-surface));
}

.cc-custom-info__vault-note svg {
  width: 18px;
  height: 18px;
  color: var(--ci-amber);
}

.cc-custom-info__vault-note strong,
.cc-custom-info__vault-note p {
  margin: 0;
}

.cc-custom-info__vault-note strong {
  font-size: 12px;
}

.cc-custom-info__vault-note p {
  margin-top: 3px;
  color: var(--ci-muted);
  font-size: 11px;
  line-height: 1.5;
}

.cc-custom-info__vault-note a {
  color: var(--ci-amber);
  font-size: 12px;
  font-weight: 700;
}

.cc-custom-info__fields {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ci-border);
}

.cc-custom-info__field-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.72fr) minmax(170px, 1.5fr) minmax(104px, 120px) 42px;
  align-items: end;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ci-border);
}

.cc-custom-info__field-row:last-child {
  border-bottom: 0;
}

.cc-custom-info__field-row textarea {
  min-height: 62px;
}

.cc-custom-info__form-actions,
.cc-custom-info__collection-form footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--ci-border);
}

.cc-custom-info__form-actions p,
.cc-custom-info__collection-form footer p {
  margin: 0;
  color: var(--ci-muted);
  font-size: 12px;
}

.cc-custom-info__form-actions p[data-kind="error"],
.cc-custom-info__collection-form footer p[data-kind="error"] {
  color: var(--ci-rose);
}

.cc-custom-info__form-actions > div {
  display: flex;
  gap: 8px;
}

.cc-custom-info__collections-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(280px, 1.2fr);
  gap: 20px;
  margin-top: 16px;
}

.cc-custom-info__collection-form {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-right: 20px;
  border-right: 1px solid var(--ci-border);
}

.cc-custom-info__collection-form header h4,
.cc-custom-info__collection-form header p {
  margin: 0;
}

.cc-custom-info__collection-form header h4 {
  font-size: 15px;
}

.cc-custom-info__collection-form header p {
  margin-top: 5px;
  color: var(--ci-muted);
  font-size: 12px;
  line-height: 1.55;
}

.cc-custom-info__collection-form footer {
  align-items: flex-end;
}

.cc-custom-info__collection-form footer > div {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.cc-custom-info__collection-policy {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ci-amber) 42%, var(--ci-border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--ci-amber) 7%, var(--ci-surface));
  color: var(--ci-muted);
  font-size: 12px;
  line-height: 1.55;
}

.cc-custom-info__collection-policy svg {
  width: 17px;
  height: 17px;
  color: var(--ci-amber);
}

.cc-custom-info__collection-groups {
  display: grid;
  align-content: start;
  gap: 20px;
  min-width: 0;
}

.cc-custom-info__collection-list > div {
  display: grid;
  gap: 7px;
}

.cc-custom-info__collection-list.is-archived {
  padding-top: 18px;
  border-top: 1px solid var(--ci-border);
}

.cc-custom-info__collection-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--ci-border);
  border-radius: 7px;
  background: var(--ci-surface);
}

.cc-custom-info__collection-item.is-archived {
  background: var(--ci-surface-subtle);
}

.cc-custom-info__collection-open {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 3px;
  border: 0;
  background: transparent;
  color: var(--ci-text);
  text-align: left;
  cursor: pointer;
}

.cc-custom-info__collection-open:not(:disabled):hover strong,
.cc-custom-info__collection-open:not(:disabled):focus-visible strong {
  color: var(--ci-accent);
}

.cc-custom-info__collection-open:disabled {
  cursor: default;
}

.cc-custom-info__collection-open > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cc-custom-info__collection-open strong,
.cc-custom-info__collection-open small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-custom-info__collection-open strong {
  font-size: 13px;
}

.cc-custom-info__collection-open small {
  color: var(--ci-muted);
  font-size: 11px;
}

.cc-custom-info__collection-open em {
  color: var(--ci-accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.cc-custom-info__collection-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.cc-custom-info__collection-actions .mini-action {
  min-height: 34px;
}

.cc-custom-info__collection-item > p {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 7px;
  border-top: 1px solid var(--ci-border);
  color: var(--ci-rose);
  font-size: 11px;
  line-height: 1.5;
}

.cc-custom-info__collection-list > div > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--ci-border);
  border-radius: 7px;
  background: var(--ci-surface);
  color: var(--ci-text);
  text-align: left;
  cursor: pointer;
}

.cc-custom-info__collection-list > div > button:hover,
.cc-custom-info__collection-list > div > button:focus-visible {
  border-color: var(--ci-accent);
  background: var(--ci-accent-soft);
}

.cc-custom-info__collection-list > div > button > span,
.cc-custom-info__collection-list > div > button > span > span {
  display: flex;
  align-items: center;
  min-width: 0;
}

.cc-custom-info__collection-list > div > button > span {
  gap: 10px;
}

.cc-custom-info__collection-list > div > button > span > span {
  display: grid;
  gap: 3px;
}

.cc-custom-info__collection-list svg {
  width: 17px;
  height: 17px;
  color: var(--ci-accent);
}

.cc-custom-info__collection-list strong,
.cc-custom-info__collection-list small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-custom-info__collection-list strong {
  font-size: 13px;
}

.cc-custom-info__collection-list small {
  color: var(--ci-muted);
  font-size: 11px;
}

.cc-custom-info__collection-list em {
  flex: 0 0 auto;
  color: var(--ci-accent);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 980px) {
  .cc-custom-info__collection-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-custom-info__records-layout,
  .cc-custom-info__collections-layout {
    grid-template-columns: 1fr;
  }

  .cc-custom-info__detail-shell {
    min-height: 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--ci-border);
    border-left: 0;
  }

  .cc-custom-info__collection-form {
    padding: 0 0 18px;
    border-right: 0;
    border-bottom: 1px solid var(--ci-border);
  }

  .cc-custom-info__field-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(104px, 120px) 42px;
  }
}

@media (max-width: 760px) {
  body.owner-shell-v1 .cc-custom-info {
    padding-bottom: calc(var(--cc-mobile-nav-height, 64px) + 24px);
  }

  .cc-custom-info__heading,
  .cc-custom-info__heading.is-compact,
  .cc-custom-info__detail > header,
  .cc-custom-info__form-actions,
  .cc-custom-info__collection-form footer {
    align-items: stretch;
    flex-direction: column;
  }

  .cc-custom-info__collection-form footer > div,
  .cc-custom-info__collection-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .cc-custom-info__collection-form footer > div .hud-button,
  .cc-custom-info__collection-actions .mini-action {
    width: 100%;
    min-height: 44px;
  }

  .cc-custom-info__collection-item {
    grid-template-columns: minmax(0, 1fr);
  }

  .cc-custom-info__collection-open {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .cc-custom-info__collection-open em {
    grid-column: 2;
    justify-self: start;
  }

  .cc-custom-info__heading .hud-button,
  .cc-custom-info__form-actions .hud-button,
  .cc-custom-info__collection-form footer .hud-button {
    width: 100%;
    min-height: 44px;
  }

  .cc-custom-info__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cc-custom-info__collection-strip,
  .cc-custom-info__detail-fields,
  .cc-custom-info__form-grid {
    grid-template-columns: 1fr;
  }

  .cc-custom-info__form-grid .is-wide {
    grid-column: auto;
  }

  .cc-custom-info__toolbar {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .cc-custom-info__toolbar label:first-child {
    grid-column: 1 / -1;
  }

  .cc-custom-info__record,
  .cc-custom-info__records .cc-custom-info__record {
    grid-template-columns: minmax(0, 1fr) 18px;
    min-height: 62px;
  }

  .cc-custom-info__record-preview {
    grid-column: 1 / -1;
  }

  .cc-custom-info__detail-actions,
  .cc-custom-info__form-actions > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .cc-custom-info__detail-actions .hud-button {
    min-height: 44px;
  }

  .cc-custom-info__vault-note {
    grid-template-columns: 20px minmax(0, 1fr);
  }

  .cc-custom-info__vault-note a {
    grid-column: 2;
  }

  .cc-custom-info__fields > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .cc-custom-info__fields > header .hud-button {
    width: 100%;
    min-height: 44px;
  }

  .cc-custom-info__field-row {
    grid-template-columns: minmax(0, 1fr) 42px;
    padding: 12px 0;
  }

  .cc-custom-info__field-row label {
    grid-column: 1 / -1;
  }

  .cc-custom-info__field-row .cc-custom-info__icon-button {
    grid-column: 2;
    justify-self: end;
  }

  .cc-custom-info__collection-list > div > button {
    min-height: 64px;
  }
}

@media (max-width: 640px) {
  .cc-custom-info__record-mode {
    width: 100%;
  }

  .cc-custom-info__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .cc-custom-info__metrics,
  .cc-custom-info__collection-strip {
    grid-template-columns: 1fr;
  }

  .cc-custom-info__metrics > div:last-child {
    grid-column: auto;
  }

  .cc-custom-info__detail-actions,
  .cc-custom-info__form-actions > div,
  .cc-custom-info__collection-actions,
  .cc-custom-info__collection-form footer > div {
    grid-template-columns: 1fr;
  }

  .cc-custom-info__vault-note a,
  .cc-custom-info__field-row .cc-custom-info__icon-button,
  .cc-custom-info__collection-list em {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
  }

  .cc-custom-info__field-row .cc-custom-info__icon-button {
    min-height: 42px;
  }

  .cc-custom-info__collection-list > div > button {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cc-custom-info__loading svg {
    animation: none;
  }
}

/* Formal r6 module finish: flat records, compact metrics, distinct day/night desks. */
html[data-theme="day"] body.owner-shell-v1:not(.auth-required) .cc-custom-info {
  --ci-surface: rgb(251 250 244 / 96%);
  --ci-surface-subtle: rgb(241 244 236 / 94%);
  --ci-border: #c8d3cf;
  --ci-text: #1d363c;
  --ci-muted: #617577;
  --ci-accent: #246c69;
  --ci-accent-soft: #dce9e3;
  --ci-amber: #a7773f;
  --ci-rose: #b96255;
}

html[data-theme="night"] body.owner-shell-v1:not(.auth-required) .cc-custom-info {
  --ci-surface: rgb(10 29 36 / 92%);
  --ci-surface-subtle: rgb(14 39 46 / 90%);
  --ci-border: #29434a;
  --ci-text: #d7e5df;
  --ci-muted: #78999a;
  --ci-accent: #7dc8bc;
  --ci-accent-soft: rgb(35 78 75 / 58%);
  --ci-amber: #d4ad67;
  --ci-rose: #df7d6c;
}

html[data-theme="day"] body.owner-shell-v1:not(.auth-required) .cc-custom-info > .cc-custom-info__panel,
html[data-theme="night"] body.owner-shell-v1:not(.auth-required) .cc-custom-info > .cc-custom-info__panel {
  border-radius: 4px;
  box-shadow: none;
}

html[data-theme="day"] body.owner-shell-v1:not(.auth-required) .cc-custom-info > .cc-custom-info__panel {
  border: 1px solid #c6d1cd;
  border-top: 3px solid var(--ci-accent);
  background:
    linear-gradient(112deg, rgb(36 108 105 / 5%), transparent 42%),
    rgb(251 250 244 / 96%);
}

html[data-theme="night"] body.owner-shell-v1:not(.auth-required) .cc-custom-info > .cc-custom-info__panel {
  border: 1px solid rgb(126 196 189 / 22%);
  border-top: 2px solid var(--ci-accent);
  border-left: 2px solid #d4ad67;
  background:
    repeating-linear-gradient(90deg, transparent 0 71px, rgb(126 196 189 / 2.5%) 71px 72px),
    rgb(10 29 36 / 92%);
  box-shadow: 0 16px 34px rgb(0 5 8 / 18%);
}

body.owner-shell-v1 .cc-custom-info__heading h3 {
  font-family: var(--formal-serif, "Noto Serif SC", "Songti SC", SimSun, serif);
  font-size: 19px;
  font-weight: 650;
}

body.owner-shell-v1 .cc-custom-info__eyebrow,
body.owner-shell-v1 .cc-custom-info__metrics strong,
body.owner-shell-v1 .cc-custom-info__record-mode strong,
body.owner-shell-v1 .cc-custom-info__collection-chip strong,
body.owner-shell-v1 .cc-custom-info__collection-open em {
  font-family: var(--formal-mono, "Cascadia Mono", Consolas, monospace);
  font-variant-numeric: tabular-nums;
}

body.owner-shell-v1 .cc-custom-info__metrics {
  gap: 0;
  margin-top: 14px;
  overflow: visible;
  border: 0;
  border-block: 1px solid var(--ci-border);
  border-radius: 0;
  background: transparent;
}

body.owner-shell-v1 .cc-custom-info__metrics > div {
  min-height: 72px;
  padding: 12px 14px;
  border-right: 1px solid var(--ci-border);
  background: transparent;
}

body.owner-shell-v1 .cc-custom-info__metrics > div:last-child {
  border-right: 0;
}

body.owner-shell-v1 .cc-custom-info__metrics strong {
  color: var(--ci-text);
  font-size: 19px;
}

body.owner-shell-v1 .cc-custom-info__metrics > div:last-child strong {
  font-family: var(--formal-sans, "Microsoft YaHei UI", sans-serif);
  font-size: 13px;
  line-height: 1.35;
}

body.owner-shell-v1 .cc-custom-info__overview-section {
  margin-top: 18px;
}

body.owner-shell-v1 .cc-custom-info__recent-list,
body.owner-shell-v1 .cc-custom-info__records > div {
  gap: 0;
}

body.owner-shell-v1 .cc-custom-info__record {
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid var(--ci-border);
  border-radius: 0;
  background: transparent;
}

body.owner-shell-v1 .cc-custom-info__record:first-child {
  border-top: 1px solid var(--ci-border);
}

body.owner-shell-v1 .cc-custom-info__record.is-selected {
  box-shadow: inset 3px 0 0 var(--ci-accent);
}

body.owner-shell-v1 .cc-custom-info__record:hover,
body.owner-shell-v1 .cc-custom-info__record:focus-visible,
body.owner-shell-v1 .cc-custom-info__record.is-selected {
  border-bottom-color: color-mix(in srgb, var(--ci-accent) 58%, var(--ci-border));
  background: var(--ci-accent-soft);
}

body.owner-shell-v1 .cc-custom-info__empty,
body.owner-shell-v1 .cc-custom-info__error {
  min-height: 96px;
  padding: 18px 14px;
  border: 0;
  border-block: 1px solid var(--ci-border);
  border-left: 3px solid var(--ci-accent);
  border-radius: 0;
  background: color-mix(in srgb, var(--ci-accent) 4%, transparent);
}

body.owner-shell-v1 .cc-custom-info__error {
  border-left-color: var(--ci-rose);
}

body.owner-shell-v1 .cc-custom-info__collection-strip:has(> .cc-custom-info__empty:only-child) {
  grid-template-columns: minmax(0, 1fr);
}

body.owner-shell-v1 .cc-custom-info__collection-chip,
body.owner-shell-v1 .cc-custom-info__record-mode,
body.owner-shell-v1 .cc-custom-info__notice,
body.owner-shell-v1 .cc-custom-info__toolbar label > div,
body.owner-shell-v1 .cc-custom-info input,
body.owner-shell-v1 .cc-custom-info textarea,
body.owner-shell-v1 .cc-custom-info select,
body.owner-shell-v1 .cc-custom-info__icon-button,
body.owner-shell-v1 .cc-custom-info__vault-note,
body.owner-shell-v1 .cc-custom-info__archive-warning,
body.owner-shell-v1 .cc-custom-info__collection-policy,
body.owner-shell-v1 .cc-custom-info__collection-item,
body.owner-shell-v1 .cc-custom-info__collection-list > div > button {
  border-radius: 4px;
}

body.owner-shell-v1 .cc-custom-info__detail-fields {
  gap: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--ci-border);
  border-left: 1px solid var(--ci-border);
  border-radius: 0;
  background: transparent;
}

body.owner-shell-v1 .cc-custom-info__detail-field {
  border-right: 1px solid var(--ci-border);
  border-bottom: 1px solid var(--ci-border);
  background: transparent;
}

body.owner-shell-v1 .cc-custom-info__detail-fields > .cc-custom-info__empty,
body.owner-shell-v1 .cc-custom-info__detail-fields > .cc-custom-info__error {
  grid-column: 1 / -1;
}

@media (max-width: 760px) {
  body.owner-shell-v1 .cc-custom-info__heading h3 {
    font-size: 18px;
  }

  body.owner-shell-v1 .cc-custom-info__heading {
    gap: 12px;
    padding-bottom: 14px;
  }

  body.owner-shell-v1 .cc-custom-info__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.owner-shell-v1 .cc-custom-info__metrics > div {
    min-height: 66px;
    padding: 10px 11px;
    border-right: 1px solid var(--ci-border);
    border-bottom: 1px solid var(--ci-border);
  }

  body.owner-shell-v1 .cc-custom-info__metrics > div:nth-child(2n) {
    border-right: 0;
  }

  body.owner-shell-v1 .cc-custom-info__metrics > div:nth-child(n + 3) {
    border-bottom: 0;
  }

  body.owner-shell-v1 .cc-custom-info__collection-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  body.owner-shell-v1 .cc-custom-info__overview-section {
    margin-top: 16px;
  }

  body.owner-shell-v1 .cc-custom-info__record {
    min-height: 60px;
    padding-inline: 8px;
  }

  body.owner-shell-v1 .cc-custom-info__empty,
  body.owner-shell-v1 .cc-custom-info__error {
    min-height: 88px;
    padding: 14px 10px;
  }
}

@media (max-width: 420px) {
  body.owner-shell-v1 .cc-custom-info__metrics,
  body.owner-shell-v1 .cc-custom-info__collection-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.owner-shell-v1 .cc-custom-info__collection-strip:has(> .cc-custom-info__empty:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }

  body.owner-shell-v1 .cc-custom-info__collection-chip {
    min-height: 44px;
    padding-inline: 9px;
  }
}
