* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f7f9fb;
  color: #1f2933;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 248px;
  border-right: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #eef6ff;
  color: #1e88e5;
  font-weight: 800;
}

.brand-title {
  font-weight: 700;
}

.brand-subtitle {
  margin-top: 2px;
  color: #667085;
  font-size: 12px;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 20px;
}

.nav button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #667085;
  cursor: pointer;
  font-size: 14px;
  padding: 11px 12px;
  text-align: left;
}

.nav-alert-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #d92d20;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 0 6px;
}

.nav-alert-badge.alert-medium {
  background: #dc6803;
}

.nav button.active {
  background: #eef6ff;
  color: #1e88e5;
  font-weight: 700;
}

.main {
  margin-left: 248px;
  padding: 28px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.admin-login {
  display: flex;
  align-items: center;
  gap: 10px;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 28px;
}

.topbar p,
.panel-header p {
  margin-top: 6px;
  color: #667085;
}

.primary-button {
  border: 0;
  border-radius: 8px;
  background: #1e88e5;
  color: #ffffff;
  cursor: pointer;
  font-weight: 700;
  padding: 12px 18px;
}

.secondary-button {
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  cursor: pointer;
  font-weight: 700;
  padding: 11px 16px;
}

.danger-button {
  border: 1px solid #fda29b;
  border-radius: 8px;
  background: #ffffff;
  color: #b42318;
  cursor: pointer;
  font-weight: 700;
  padding: 11px 16px;
}

.primary-button:disabled,
.secondary-button:disabled,
.danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.top-message {
  display: none;
  margin-top: 16px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
  color: #475467;
  font-size: 14px;
  padding: 11px 12px;
}

.top-message.show {
  display: block;
}

.top-message.success {
  border-color: #b7e4c7;
  background: #effaf3;
  color: #237a43;
}

.top-message.error {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.user-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.stat-card,
.panel,
.module-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.stat-card {
  padding: 18px;
}

.stat-card span {
  color: #667085;
  font-size: 13px;
}

.stat-card strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
}

.data-alert-stat.alert-clear strong {
  color: #237a43;
}

.data-alert-stat.alert-critical {
  border-color: #fda29b;
  background: #fff4f2;
}

.data-alert-stat.alert-critical strong {
  color: #b42318;
}

.data-alert-stat.alert-high {
  border-color: #fedf89;
  background: #fffbeb;
}

.data-alert-stat.alert-high strong,
.data-alert-stat.alert-medium strong {
  color: #b54708;
}

.data-alert-stat.alert-medium {
  border-color: #fedf89;
  background: #fffaf0;
}

.panel {
  margin-top: 20px;
  padding: 22px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-input {
  width: 320px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  padding: 11px 12px;
}

.compact-input {
  width: 180px;
}

.filter-select {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2933;
  font-size: 14px;
  min-height: 42px;
  padding: 9px 10px;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.module-card {
  padding: 18px;
}

.module-card h3 {
  margin: 0;
  font-size: 16px;
}

.module-card p {
  margin-top: 8px;
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
}

.data-center-stats {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.data-center-meta {
  margin-top: 14px;
  color: #667085;
  font-size: 13px;
}

.sales-report-heading {
  align-items: center;
  margin-top: 22px;
  margin-bottom: 10px;
}

.sales-report-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sales-report-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

.sales-report-stats .stat-card strong {
  color: #237a43;
}

.sales-trend-chart {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-height: 228px;
  overflow-x: auto;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.sales-trend-column {
  display: grid;
  grid-template-rows: 22px 150px 20px;
  gap: 8px;
  flex: 1 0 48px;
  min-width: 48px;
  align-items: end;
  justify-items: center;
  color: #667085;
  font-size: 12px;
}

.sales-trend-column > span,
.sales-trend-column > small {
  width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-trend-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  width: 100%;
  height: 150px;
  padding: 0 4px;
}

.sales-trend-bars i {
  display: block;
  width: 28px;
  min-height: 0;
  border-radius: 5px 5px 0 0;
  background: #237a43;
}

.sales-platform-list,
.sales-product-list {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 0 14px;
}

.sales-platform-row,
.sales-product-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  border-bottom: 1px solid #f0f2f4;
}

.sales-platform-row:last-child,
.sales-product-row:last-child {
  border-bottom: 0;
}

.sales-platform-row span,
.sales-product-row span {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.sales-platform-row strong,
.sales-product-row strong {
  color: #237a43;
  white-space: nowrap;
}

.sales-platform-row small,
.sales-product-row small {
  color: #667085;
  font-size: 12px;
}

.data-center-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 16px;
  margin-top: 18px;
}

.data-center-table-layout {
  grid-template-columns: 1fr;
}

.data-center-block {
  min-width: 0;
}

.data-center-block .section-title-row {
  margin-bottom: 10px;
}

.filter-inline-label {
  color: #667085;
  font-size: 12px;
  font-weight: 600;
}

.diagnostic-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.diagnostic-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  font-size: 12px;
}

.diagnostic-chip.muted {
  background: #ffffff;
}

.diagnostic-chip strong {
  color: #344054;
}

.diagnostic-chip small {
  color: #667085;
}

.diagnostic-table-head,
.diagnostic-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) minmax(160px, 0.8fr) 140px;
  gap: 12px;
  align-items: center;
}

.diagnostic-table-head {
  padding: 10px 14px;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.diagnostic-row {
  padding: 12px 14px;
  border-bottom: 1px solid #eef2f6;
  font-size: 13px;
}

.diagnostic-row strong,
.diagnostic-row small {
  display: block;
}

.diagnostic-raw-details {
  margin-top: 6px;
  color: #667085;
  font-size: 12px;
}

.diagnostic-raw-details summary {
  cursor: pointer;
  color: #2563eb;
}

.diagnostic-raw-details div {
  margin-top: 4px;
}

.diagnostic-raw-records {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}

.diagnostic-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 12px;
  color: #667085;
  font-size: 12px;
}

.diagnostic-pagination[hidden] {
  display: none;
}

.diagnostic-row small {
  margin-top: 4px;
  color: #667085;
  line-height: 1.35;
}

.diagnostic-performance small,
.diagnostic-recovery small {
  color: #667085;
}

.diagnostic-alert-list {
  display: grid;
  gap: 10px;
}

.diagnostic-alert-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  border: 1px solid #e5e7eb;
  border-left-width: 4px;
  border-radius: 12px;
  background: #ffffff;
  padding: 18px;
}

.diagnostic-alert-row.alert-critical {
  border-left-color: #d92d20;
  background: #fffafa;
}

.diagnostic-alert-row.alert-high {
  border-left-color: #f79009;
}

.diagnostic-alert-row.alert-medium {
  border-left-color: #fdb022;
}

.diagnostic-alert-row.resolved {
  opacity: 0.68;
}

.diagnostic-alert-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.diagnostic-alert-title strong {
  color: #1d2939;
  font-size: 17px;
  line-height: 1.4;
}

.alert-severity-pill,
.alert-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
}

.alert-severity-pill {
  background: #344054;
  color: #ffffff;
}

.alert-status-pill {
  background: #f2f4f7;
  color: #475467;
}

.diagnostic-alert-lead {
  margin-top: 8px;
  color: #475467;
  font-size: 14px;
  line-height: 1.55;
}

.diagnostic-alert-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(104px, 1fr));
  gap: 8px;
  margin: 14px 0 0;
}

.diagnostic-alert-metric {
  min-width: 0;
  border: 1px solid #eaecf0;
  border-radius: 8px;
  background: #f9fafb;
  padding: 9px 10px;
}

.diagnostic-alert-metric dt {
  color: #667085;
  font-size: 11px;
}

.diagnostic-alert-metric dd {
  margin: 4px 0 0;
  color: #1d2939;
  font-size: 14px;
  font-weight: 700;
}

.diagnostic-alert-timestamp {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  color: #667085;
  font-size: 12px;
}

.diagnostic-alert-recommendation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  margin-top: 14px;
  border: 1px solid #fedf89;
  border-radius: 8px;
  background: #fffaeb;
  color: #475467;
  padding: 10px 12px;
}

.diagnostic-alert-recommendation strong {
  color: #93370d;
  font-size: 12px;
  white-space: nowrap;
}

.diagnostic-alert-recommendation p {
  font-size: 13px;
  line-height: 1.5;
}

.diagnostic-alert-samples {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 12px;
  border-top: 1px solid #eaecf0;
  padding-top: 12px;
}

.diagnostic-alert-samples[hidden] {
  display: none;
}

.diagnostic-alert-samples > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.diagnostic-alert-samples span {
  color: #667085;
  font-size: 11px;
}

.diagnostic-alert-samples code {
  color: #344054;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.diagnostic-alert-sample-wide {
  grid-column: 1 / -1;
}

.diagnostic-alert-provider-error {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 0;
  color: #b42318;
  font-size: 12px;
  line-height: 1.45;
}

.diagnostic-alert-provider-error code {
  color: #b42318;
  flex: 1 1 480px;
}

.diagnostic-alert-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.compact-action-button {
  white-space: nowrap;
  padding: 8px 10px;
}

.data-trend-chart,
.data-funnel-list {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
}

.data-trend-chart {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-height: 228px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
}

.trend-column {
  display: grid;
  grid-template-rows: 22px 150px 20px;
  gap: 8px;
  flex: 1 0 40px;
  min-width: 40px;
  align-items: end;
  justify-items: center;
}

.trend-day,
.trend-value,
.funnel-percent {
  color: #667085;
  font-size: 12px;
}

.trend-day,
.trend-value {
  width: 100%;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.trend-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  width: 100%;
  height: 150px;
  padding: 0 4px;
}

.trend-bar {
  display: block;
  width: min(100%, 26px);
  min-width: 8px;
  min-height: 4px;
  border-radius: 999px;
}

.trend-bar.visit {
  background: #2563eb;
}

.trend-bar.is-zero {
  background: #dbe4f0;
}

.trend-bar.study {
  background: #16a34a;
}

.trend-bar.download {
  background: #f59e0b;
}

.trend-bar.unlock {
  background: #7c3aed;
}

.funnel-row {
  display: grid;
  grid-template-columns: 86px minmax(120px, 1fr) 46px;
  gap: 10px;
  align-items: center;
}

.funnel-row + .funnel-row {
  margin-top: 12px;
}

.funnel-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.funnel-label span {
  color: #667085;
  font-size: 12px;
}

.funnel-label strong {
  color: #111827;
  font-size: 16px;
}

.funnel-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2f7;
}

.funnel-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #2563eb;
}

.empty-module {
  padding: 24px 18px;
}

.empty-module h2 {
  margin: 0;
  font-size: 18px;
}

.empty-module p {
  margin-top: 8px;
  color: #667085;
}

.hidden {
  display: none;
}

[hidden] {
  display: none !important;
}

.status-pill {
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  color: #667085;
  font-size: 13px;
  padding: 6px 10px;
}

.status-pill.active {
  border-color: #b7e4c7;
  background: #effaf3;
  color: #237a43;
}

.upload-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  margin-top: 14px;
  align-items: end;
}

.upload-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #667085;
  font-size: 13px;
}

.formal-source-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #667085;
  font-size: 13px;
}

.formal-source-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.formal-source-picker .secondary-button {
  min-height: 42px;
  white-space: nowrap;
}

.material-edit-form .upload-form label,
.material-edit-form .formal-source-field,
.material-edit-form .delivery-mode-field {
  gap: 4px;
  font-size: 12px;
}

.material-edit-form .formal-source-picker .secondary-button {
  min-height: 34px;
  padding: 7px 10px;
}

.delivery-mode-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #667085;
  font-size: 13px;
}

.segmented-control {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(420px, 100%);
  overflow: hidden;
  border: 1px solid #d9e3f0;
  border-radius: 8px;
  background: #ffffff;
}

.segmented-control label {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.segmented-control input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-control span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  color: #475467;
  font-size: 13px;
  font-weight: 700;
}

.material-edit-form .segmented-control span {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 12px;
}

.segmented-control label + label span {
  border-left: 1px solid #d9e3f0;
}

.segmented-control input:checked + span {
  background: #effaf3;
  color: #237a43;
}

.field-hint {
  color: #98a2b3;
  font-size: 12px;
  line-height: 1.5;
}

.upload-form select,
.upload-form input[type="text"],
.upload-form input[type="url"],
.upload-form textarea,
.upload-form input[type="file"] {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2933;
  font-size: 14px;
  min-height: 42px;
  padding: 9px 10px;
}

.material-edit-form .upload-form select,
.material-edit-form .upload-form input[type="text"],
.material-edit-form .upload-form input[type="url"],
.material-edit-form .upload-form textarea,
.material-edit-form .upload-form input[type="file"] {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 12px;
}

.upload-form textarea {
  min-height: 96px;
  line-height: 1.55;
  resize: vertical;
}

.upload-form textarea[readonly] {
  background: #f8fafc;
  color: #475467;
  cursor: default;
}

.material-edit-form .upload-form textarea {
  min-height: 68px;
  line-height: 1.35;
}

.netdisk-share-field {
  position: relative;
}

.netdisk-parse-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  border: 1px solid #b7e4c7;
  border-radius: 8px;
  background: #effaf3;
  color: #237a43;
  font-size: 12px;
  padding: 8px 10px;
}

.netdisk-parse-preview strong {
  min-width: 0;
  overflow: hidden;
  color: #14532d;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.netdisk-parse-preview em {
  color: #237a43;
  font-style: normal;
  white-space: nowrap;
}

.upload-form .check-row {
  flex-direction: row;
  align-items: center;
  min-height: 42px;
}

.upload-form .check-row input {
  width: auto;
}

.material-files {
  margin-top: 18px;
  border-top: 1px solid #e5e7eb;
  padding-top: 18px;
}

.formal-file-section {
  margin-top: 4px;
  border: 1px solid #d9e3f0;
  border-radius: 16px;
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 24%);
  padding: 16px;
}

.material-edit-form .formal-file-section {
  margin-top: 0;
  border-radius: 8px;
  padding: 10px;
}

.optional-section > summary {
  cursor: pointer;
  color: #475467;
  font-size: 13px;
  font-weight: 700;
  list-style-position: outside;
}

.optional-section[open] > summary {
  margin-bottom: 14px;
}

.material-edit-form .advanced-material-grid {
  margin-top: 12px;
}

.material-publish-notice {
  border-left-color: #2589e8;
  background: #f1f7ff;
  color: #31577d;
}

.formal-file-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.material-edit-form .formal-file-head {
  align-items: center;
  gap: 10px;
}

.formal-file-head h3 {
  margin: 0;
  color: #111827;
  font-size: 18px;
}

.material-edit-form .formal-file-head h3 {
  font-size: 15px;
}

.formal-file-head p {
  margin-top: 6px;
  color: #667085;
  font-size: 13px;
  line-height: 1.6;
}

.material-edit-form .formal-file-head p {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
}

.module-banner {
  margin-top: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 14px;
}

.module-banner.primary {
  border-color: #cfe0ff;
  background: #f6f9ff;
}

.module-banner.secondary {
  border-color: #dbe7f5;
  background: #f8fbff;
}

.module-banner strong {
  display: block;
  color: #111827;
  font-size: 13px;
}

.module-banner span {
  display: block;
  margin-top: 5px;
  color: #667085;
  font-size: 12px;
  line-height: 1.6;
}

.formal-file-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.material-edit-form .formal-file-form {
  gap: 8px;
  margin-top: 8px;
}

.formal-file-form > .full-width {
  grid-column: 1 / -1;
}

.subsection-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.subsection-header h3 {
  margin: 0;
  font-size: 15px;
}

.subsection-header p {
  margin-top: 4px;
  color: #667085;
  font-size: 13px;
}

.section-guide-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.section-guide-grid.single-column {
  grid-template-columns: 1fr;
}

.section-guide-card {
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fafbfc;
  padding: 10px 12px;
}

.section-guide-card.highlight {
  border-color: #bfd8ff;
  background: #f5f9ff;
}

.section-guide-card.soft {
  background: #f8fafc;
}

.section-guide-card strong {
  display: block;
  color: #111827;
  font-size: 13px;
}

.section-guide-card span {
  display: block;
  margin-top: 4px;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}

.file-actions {
  display: flex;
  justify-content: flex-end;
}

.upload-result {
  margin-top: 14px;
  color: #667085;
  font-size: 14px;
}

.upload-result.success {
  color: #237a43;
}

.upload-result.error {
  color: #c2410c;
}

.pending-file-panel {
  margin-top: 12px;
  border: 1px solid #cfe0ff;
  border-radius: 10px;
  background: #f6f9ff;
  padding: 12px;
}

.material-edit-form .pending-file-panel {
  margin-top: 8px;
  border-radius: 8px;
  padding: 8px;
}

.pending-file-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  color: #111827;
  font-size: 13px;
}

.material-edit-form .pending-file-title {
  gap: 8px;
  font-size: 12px;
}

.pending-file-title span {
  color: #237a43;
  flex: 1 1 260px;
  font-size: 12px;
  text-align: right;
}

.pending-file-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
  padding: 7px 10px;
  color: #667085;
  font-size: 12px;
}

.material-edit-form .pending-file-summary {
  margin-top: 6px;
  padding: 5px 8px;
}

.pending-file-summary strong {
  color: #111827;
  font-size: 13px;
}

.pending-file-list {
  margin-top: 10px;
  overflow-x: auto;
  border: 1px solid #e5eefc;
  border-radius: 8px;
  background: #ffffff;
}

.material-edit-form .pending-file-list {
  margin-top: 7px;
}

.pending-file-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 72px 92px 92px 190px 72px;
  gap: 10px;
  align-items: center;
  min-width: 812px;
  border-top: 1px solid #eef2f7;
  color: #334155;
  font-size: 13px;
  padding: 9px 10px;
}

.material-edit-form .pending-file-row {
  gap: 8px;
  font-size: 12px;
  padding: 6px 8px;
}

.pending-file-row:first-child {
  border-top: 0;
}

.pending-file-row strong {
  overflow: hidden;
  color: #111827;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-file-row-head {
  background: #f8fafc;
  color: #667085;
  font-weight: 600;
}

.pending-file-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pending-primary-button {
  width: 84px;
  border: 1px solid #d6e3f8;
  border-radius: 7px;
  background: #ffffff;
  color: #356190;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 8px;
}

.pending-remove-button {
  width: 60px;
  border: 1px solid #fed7aa;
  border-radius: 7px;
  background: #fff7ed;
  color: #c2410c;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  padding: 6px 8px;
}

.pending-primary-button.active {
  border-color: #2088f0;
  background: #eaf4ff;
  color: #0969c3;
  font-weight: 700;
}

.pending-file-muted {
  color: #98a2b3;
}

.file-list {
  margin-top: 18px;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.compact-file-list,
.compact-source-list {
  margin-top: 12px;
  max-height: 230px;
  overflow: auto;
}

.file-bulk-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 980px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
  color: #667085;
  font-size: 12px;
  padding: 10px 12px;
}

.file-select-all,
.file-select-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.file-select-all input,
.file-select-cell input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #2088f0;
}

.file-select-cell {
  justify-content: center;
}

.file-table-head,
.file-row {
  display: grid;
  grid-template-columns: 36px minmax(360px, 1.4fr) 64px 80px 132px minmax(220px, 1fr) 260px;
  gap: 10px;
  align-items: center;
  min-width: 1180px;
  padding: 11px 12px;
}

.file-table-head {
  background: #f8fafc;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
}

.file-row {
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  font-size: 13px;
}

.file-row.selected {
  background: #f6f9ff;
}

.file-row.draft-new,
.file-row.pending-primary {
  background: #f5fbff;
}

.file-row.pending-delete {
  background: #fff7f5;
  color: #8a3b2d;
}

.file-row.pending-delete strong,
.file-row.pending-delete code {
  color: #9f2f1f;
}

.file-row strong {
  color: #111827;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: normal;
}

.empty-line {
  margin-top: 6px;
  color: #667085;
  font-size: 13px;
}

.list-state-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 12px;
  border-top: 1px solid #e5e7eb;
  color: #667085;
  font-size: 13px;
}

.list-more-button {
  min-height: 34px;
}

.file-row code {
  overflow-wrap: anywhere;
  color: #334155;
  font-size: 12px;
}

.file-row-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.material-file-action {
  display: flex;
  justify-content: flex-start;
}

.file-row-actions .link-button[disabled] {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}

.file-empty {
  margin: 0;
  padding: 12px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
}

.registered-file-empty {
  display: grid;
  gap: 4px;
  min-width: 980px;
}

.registered-file-empty strong {
  color: #334155;
  font-size: 13px;
}

.registered-file-empty span {
  color: #667085;
  line-height: 1.5;
}

.material-layout {
  display: block;
  margin-top: 20px;
}

.code-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.code-summary-card {
  display: grid;
  gap: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px 16px;
}

.code-summary-card span {
  color: #667085;
  font-size: 13px;
  font-weight: 700;
}

.code-summary-card strong {
  color: #111827;
  font-size: 28px;
  line-height: 1;
}

.code-summary-card.loading strong {
  color: #98a2b3;
}

.code-summary-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.code-summary-counts em {
  border-radius: 999px;
  background: #f1f5f9;
  color: #475467;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  padding: 6px 8px;
}

.material-table-wrap {
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.feedback-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: #667085;
  font-size: 13px;
}

.feedback-bulk-toolbar.has-selection {
  color: #1f2933;
}

.feedback-select-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.feedback-row-check,
.feedback-select-all input {
  width: 16px;
  height: 16px;
  accent-color: #2589e8;
}

.material-table-head,
.material-row {
  display: grid;
  grid-template-columns: 90px minmax(180px, 1.3fr) 86px 72px 76px 116px 76px 84px 132px 128px;
  gap: 10px;
  align-items: center;
  min-width: 1120px;
}

.code-table-head,
.code-row {
  display: grid;
  grid-template-columns: 150px 96px 110px 100px 110px 104px 92px minmax(220px, 1fr) 120px 130px;
  gap: 10px;
  align-items: center;
  min-width: 1294px;
}

.feedback-table-head,
.feedback-row {
  display: grid;
  grid-template-columns: 44px 82px 90px minmax(220px, 1.1fr) minmax(260px, 1fr) 96px 86px 138px 150px;
  gap: 10px;
  align-items: center;
  min-width: 1260px;
}

.user-table-head,
.user-row {
  display: grid;
  grid-template-columns: 120px 170px minmax(220px, 1fr) 80px 80px 138px 84px;
  gap: 10px;
  align-items: center;
  min-width: 980px;
}

.user-entitlement-head,
.user-entitlement-row {
  display: grid;
  grid-template-columns: 110px minmax(220px, 1fr) 110px 90px 90px 150px 110px;
  gap: 10px;
  align-items: center;
  min-width: 1000px;
}

.user-transaction-head,
.user-transaction-row {
  display: grid;
  grid-template-columns: 120px 80px 100px 130px minmax(180px, 1fr) 150px;
  gap: 10px;
  align-items: center;
  min-width: 860px;
}

.user-feedback-head,
.user-feedback-row {
  display: grid;
  grid-template-columns: 90px 100px minmax(200px, 1fr) minmax(220px, 1fr) 90px 150px;
  gap: 10px;
  align-items: center;
  min-width: 950px;
}

.refund-request-head,
.refund-request-row {
  display: grid;
  grid-template-columns: 170px minmax(210px, 1fr) 80px 210px minmax(240px, 1.2fr) 160px 190px;
  gap: 10px;
  align-items: center;
  min-width: 1280px;
}

.data-material-head,
.data-material-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 68px 68px 68px 68px;
  gap: 10px;
  align-items: center;
  min-width: 560px;
}

.data-user-head,
.data-user-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 100px 160px;
  gap: 10px;
  align-items: center;
  min-width: 520px;
}

.material-table-head,
.code-table-head,
.user-table-head,
.user-entitlement-head,
.user-transaction-head,
.user-feedback-head,
.refund-request-head,
.data-material-head,
.data-user-head {
  background: #f8fafc;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  padding: 11px 12px;
}

.material-row,
.user-row,
.user-entitlement-row,
.user-transaction-row,
.user-feedback-row,
.refund-request-row,
.data-material-row,
.data-user-row {
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  font-size: 13px;
  padding: 12px;
}

.support-notice {
  margin-bottom: 16px;
  border-left: 3px solid #d79a31;
  background: #fff8e8;
  color: #7a551d;
  font-size: 13px;
  line-height: 1.6;
  padding: 12px 14px;
}

.support-title-row {
  margin-bottom: 10px;
}

.refund-request-row span {
  min-width: 0;
}

.refund-request-row small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #98a2b3;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mono-cell {
  font-family: Consolas, "SFMono-Regular", monospace;
  font-size: 12px;
  word-break: break-all;
}

.wrap-cell {
  line-height: 1.55;
  white-space: normal;
}

.refund-request-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.refund-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 6px;
  padding: 0 8px;
  background: #f2f4f7;
  color: #667085;
  font-size: 12px;
}

.refund-status.pending,
.refund-status.processing,
.refund-status.partial {
  background: #fff4df;
  color: #9a650f;
}

.refund-approve-link {
  color: #137a45;
  font-weight: 700;
}

.refund-approve-link:disabled {
  cursor: wait;
  opacity: 0.55;
}

.refund-request-row .refund-admin-note {
  flex-basis: 100%;
  color: #667085;
  white-space: normal;
}

.refund-status.refunded {
  background: #e8f5ec;
  color: #237a43;
}

.refund-status.rejected {
  background: #fff0ed;
  color: #b42318;
}

.code-row {
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  font-size: 13px;
  padding: 12px;
}

.code-user-cell {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: #475467;
}

.code-user-link {
  max-width: 100%;
  border: 0;
  background: transparent;
  color: #1e88e5;
  cursor: pointer;
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  padding: 0;
  text-align: left;
  word-break: break-all;
}

.code-user-link:hover,
.code-user-link:focus-visible {
  text-decoration: underline;
}

.code-user-cell small {
  color: #667085;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-all;
}

.code-user-empty {
  color: #98a2b3;
}

.feedback-row {
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  font-size: 13px;
  padding: 12px;
}

.material-row strong {
  display: block;
  overflow: hidden;
  color: #111827;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-row span,
.user-row span,
.user-entitlement-row span,
.user-transaction-row span,
.user-feedback-row span,
.data-material-row span,
.data-user-row span {
  color: #475467;
}

.user-row strong,
.user-entitlement-row strong,
.user-transaction-row strong,
.user-feedback-row strong,
.data-material-row strong,
.data-user-row strong {
  display: block;
  overflow: hidden;
  color: #111827;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-material-row small,
.data-user-row small {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: #94a3b8;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-row code,
.user-info-grid code {
  overflow-wrap: anywhere;
  color: #334155;
  font-size: 12px;
}

.compact-panel-header {
  align-items: center;
  border-bottom: 1px solid #e5e7eb;
  margin: 22px 0 18px;
  padding-bottom: 16px;
}

.compact-panel-header h3 {
  margin: 0;
  color: #111827;
  font-size: 18px;
}

.compact-panel-header p {
  margin: 6px 0 0;
  color: #667085;
}

.user-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.user-detail-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.user-detail-card span {
  display: block;
  color: #667085;
  font-size: 12px;
}

.user-detail-card strong {
  display: block;
  margin-top: 8px;
  color: #111827;
  font-size: 22px;
}

.user-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.user-info-item {
  min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  padding: 12px;
}

.user-info-item span {
  display: block;
  color: #667085;
  font-size: 12px;
}

.user-info-item strong {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 6px;
  color: #111827;
  font-size: 13px;
  line-height: 1.5;
}

.user-admin-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.user-admin-tools.is-disabled {
  opacity: 0.72;
}

.user-admin-card {
  min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.user-admin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.user-admin-card-head h3 {
  margin: 0;
  color: #111827;
  font-size: 15px;
}

.user-admin-card-head span {
  color: #667085;
  font-size: 12px;
  white-space: nowrap;
}

.user-admin-form {
  display: grid;
  grid-template-columns: 130px minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.user-action-form {
  grid-template-columns: 130px minmax(180px, 1fr) auto;
}

.user-admin-form label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
  color: #667085;
  font-size: 12px;
}

.user-admin-form input,
.user-admin-form select,
.user-admin-actions input {
  width: 100%;
  min-height: 42px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2933;
  font: inherit;
  font-size: 13px;
  padding: 9px 10px;
}

.user-admin-form button {
  min-height: 42px;
  white-space: nowrap;
}

.user-admin-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
}

.user-detail-section {
  margin-top: 22px;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.section-title-row h3 {
  margin: 0;
  color: #111827;
  font-size: 16px;
}

.section-title-row span {
  color: #667085;
  font-size: 12px;
}

.feedback-row strong {
  display: block;
  color: #111827;
  line-height: 1.45;
}

.feedback-row span,
.feedback-row small {
  display: block;
  color: #475467;
  line-height: 1.45;
}

.feedback-row small {
  margin-top: 4px;
  font-size: 12px;
}

.material-code {
  color: #1e88e5;
  font-weight: 700;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 12px;
  padding: 5px 8px;
}

.status-badge.draft {
  background: #f2f4f7;
  color: #475467;
}

.status-badge.published {
  background: #effaf3;
  color: #237a43;
}

.status-badge.offline {
  background: #fff7ed;
  color: #c2410c;
}

.status-badge.used {
  background: #eef6ff;
  color: #1e88e5;
}

.status-badge.disabled {
  background: #fef3f2;
  color: #b42318;
}

.status-badge.expired {
  background: #f3f4f6;
  color: #475467;
}

.status-badge.open {
  background: #fff7ed;
  color: #c2410c;
}

.status-badge.resolved {
  background: #effaf3;
  color: #237a43;
}

.status-badge.ignored {
  background: #f2f4f7;
  color: #475467;
}

.status-badge.feedback-type {
  background: #eff6ff;
  color: #1d4ed8;
}

.content-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 8px;
}

.content-badge.available {
  background: #effaf3;
  color: #237a43;
}

.content-badge.empty {
  background: #f2f4f7;
  color: #667085;
}

.package-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 72px;
  border-radius: 8px;
  gap: 3px;
  padding: 6px 8px;
  line-height: 1.1;
}

.package-badge span {
  color: inherit;
  font-size: 12px;
  font-weight: 800;
}

.package-badge small {
  color: inherit;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.78;
}

.package-badge.ready {
  background: #effaf3;
  color: #237a43;
}

.package-badge.trial-ready {
  background: #e8f5ff;
  color: #075985;
}

.package-badge.missing {
  background: #fff7ed;
  color: #c2410c;
}

.package-badge.trial-missing {
  background: #f2f4f7;
  color: #667085;
}

.package-badge.stale {
  background: #fff4e5;
  color: #b45309;
}

.package-badge.trial-stale,
.package-badge.trial-invalid {
  background: #fff4e5;
  color: #b45309;
}

.package-badge.none {
  background: #f2f4f7;
  color: #667085;
}

.package-badge.trial-none {
  background: #f2f4f7;
  color: #667085;
}

.link-button {
  border: 0;
  background: transparent;
  color: #1e88e5;
  cursor: pointer;
  font-weight: 700;
  padding: 0;
  text-align: left;
}

.link-button[disabled] {
  cursor: default;
  opacity: 0.55;
  pointer-events: none;
}

.link-button.danger-link {
  color: #b42318;
}

.user-entitlement-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.link-button.package-publish-button {
  color: #b45309;
}

.material-form {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.material-edit-form {
  max-width: none;
  margin-top: 12px;
  padding: 12px;
}

.inline-panel {
  margin-top: 0;
}

#material-edit-panel {
  padding: 16px;
}

#material-edit-panel .panel-header {
  align-items: center;
}

#material-edit-panel .panel-header p {
  margin-top: 3px;
  font-size: 12px;
}

#material-edit-panel .primary-button,
#material-edit-panel .secondary-button,
#material-edit-panel .danger-button {
  padding: 8px 12px;
}

.material-edit-form .form-title {
  display: none;
}

.form-title {
  font-size: 16px;
  font-weight: 800;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.material-edit-form .form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
  margin-top: 0;
}

.form-grid label,
.form-grid .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #667085;
  font-size: 12px;
}

.material-edit-form .form-grid label,
.material-edit-form .form-grid .form-field {
  gap: 4px;
}

.material-edit-form .material-code-field {
  grid-column: span 2;
}

.form-grid .code-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.form-grid .code-input-row input {
  flex: 1;
}

.form-grid input,
.form-grid select,
.form-grid textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2933;
  font: inherit;
  font-size: 13px;
  padding: 9px 10px;
}

.material-edit-form .form-grid input,
.material-edit-form .form-grid select,
.material-edit-form .form-grid textarea {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 12px;
}

.form-grid textarea {
  line-height: 1.5;
  resize: vertical;
}

.material-edit-form .form-grid textarea {
  min-height: 62px;
  line-height: 1.35;
}

.inline-action-button {
  min-height: 42px;
  white-space: nowrap;
}

.material-edit-form .inline-action-button {
  min-height: 34px;
}

.form-grid .check-row {
  flex-direction: row;
  align-items: center;
  min-height: 42px;
}

.form-grid .check-row input {
  width: auto;
}

.full-width {
  grid-column: 1 / -1;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.material-edit-form .form-actions {
  gap: 8px;
  margin-top: 10px;
}

.form-actions .danger-button {
  margin-right: auto;
}

.material-save-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid #d0d5dd;
  border-radius: 999px;
  background: #ffffff;
  color: #475467;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 0 10px;
  white-space: nowrap;
}

.material-save-status.saved {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.material-save-status.dirty {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.material-save-status.saving {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.material-save-status.failed {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b42318;
}

.compact-summary-card {
  margin-top: 12px;
}

.product-images-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.material-edit-form .product-images-panel {
  gap: 8px;
}

.product-preview-generator {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 110px auto auto minmax(240px, 0.8fr);
  gap: 8px;
  align-items: end;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  padding: 8px;
}

.product-preview-generator label {
  min-width: 0;
}

.product-preview-generator .preview-append-field {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  color: #475467;
  font-weight: 700;
  white-space: nowrap;
}

.product-preview-generator .preview-append-field input {
  width: auto;
}

.product-preview-generator input[type="file"],
.product-preview-generator input[type="number"] {
  min-height: 34px;
  padding: 6px 8px;
  font-size: 12px;
}

.product-preview-generator .secondary-button {
  min-height: 34px;
  white-space: nowrap;
}

.product-preview-generator .field-hint {
  align-self: center;
  min-width: 0;
  overflow: hidden;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-preview-generator .field-hint[data-state="success"] {
  color: #237a43;
}

.product-preview-generator .field-hint[data-state="error"] {
  color: #b42318;
}

.product-images-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.material-edit-form .product-images-actions {
  gap: 8px;
}

.product-images-actions .field-hint {
  flex: 1 1 260px;
  margin: 0;
}

.cover-upload-button {
  padding: 11px 16px;
}

.material-edit-form .cover-upload-button {
  padding: 8px 12px;
}

.page-preview-grid.empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-preview-empty {
  color: #98a2b3;
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  max-width: 520px;
}

.material-edit-form .media-preview-empty {
  font-size: 12px;
  line-height: 1.45;
}

.media-preview-image {
  display: block;
  width: 100%;
  max-width: 220px;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.page-preview-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-preview-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.page-preview-tab {
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 3px;
  max-width: 240px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  font: inherit;
  padding: 8px 10px;
  text-align: left;
}

.page-preview-tab.active {
  border-color: #2088f0;
  background: #eef7ff;
  color: #075da8;
}

.page-preview-tab strong,
.page-preview-tab span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-preview-tab strong {
  color: inherit;
  font-size: 13px;
}

.page-preview-tab span {
  color: #667085;
  font-size: 12px;
}

.page-preview-active-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #111827;
  font-size: 13px;
}

.page-preview-active-title span {
  color: #667085;
  font-size: 12px;
}

.page-preview-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.material-edit-form .page-preview-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.page-preview-card {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  overflow: hidden;
}

.page-preview-card.editable {
  cursor: grab;
}

.page-preview-card.dragging {
  opacity: 0.55;
}

.page-preview-card.drag-over {
  border-color: #1e88e5;
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.12);
}

.page-preview-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #ffffff;
  object-fit: cover;
}

.material-edit-form .page-preview-card img {
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.page-preview-meta {
  border-top: 1px solid #e5e7eb;
  color: #667085;
  font-size: 12px;
  padding: 8px 10px;
}

.material-edit-form .page-preview-meta {
  padding: 6px 8px;
}

.page-preview-order {
  position: absolute;
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.78);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.page-preview-card-actions {
  display: flex;
  gap: 6px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 8px;
}

.material-edit-form .page-preview-card-actions {
  gap: 5px;
  padding: 6px;
}

.page-preview-card-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  border: 1px solid #d0d5dd;
  border-radius: 8px;
  background: #ffffff;
  color: #344054;
  cursor: pointer;
  font-weight: 700;
}

.material-edit-form .page-preview-card-actions button {
  min-width: 28px;
  height: 28px;
}

.page-preview-card-actions .replace-image-button {
  min-width: 48px;
  padding: 0 8px;
}

.page-preview-card-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.page-preview-card-actions .danger-icon-button {
  margin-left: auto;
  border-color: #fda29b;
  color: #b42318;
}

.file-primary-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e8f2ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
}

.file-primary-tag.draft-tag {
  background: #fff7ed;
  color: #c2410c;
}

.file-primary-tag.delete-tag {
  background: #fef2f2;
  color: #b42318;
}

.code-ops,
.feedback-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.feedback-process-dialog,
.refund-revoke-dialog {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.feedback-process-dialog.hidden,
.refund-revoke-dialog.hidden {
  display: none;
}

.feedback-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.34);
}

.feedback-process-card {
  position: relative;
  width: min(720px, 100%);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
  padding: 18px;
}

.feedback-process-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

.feedback-process-head h3 {
  margin: 0;
  color: #111827;
  font-size: 18px;
}

.feedback-process-head p {
  margin-top: 5px;
  color: #667085;
  font-size: 13px;
  line-height: 1.5;
}

.feedback-process-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.feedback-process-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #667085;
  font-size: 12px;
}

.feedback-process-grid input,
.feedback-process-grid select,
.feedback-process-grid textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #1f2933;
  font: inherit;
  font-size: 14px;
  padding: 10px 11px;
}

.feedback-process-grid textarea {
  line-height: 1.5;
  resize: vertical;
}

.feedback-process-hint {
  margin-top: 12px;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}

.refund-revoke-card {
  position: relative;
  width: min(860px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
  padding: 18px;
}

.refund-revoke-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.refund-revoke-meta span {
  min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  color: #667085;
  font-size: 12px;
  padding: 10px 11px;
}

.refund-revoke-meta strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #111827;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.refund-revoke-warning {
  margin-top: 12px;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
}

.refund-revoke-warning:empty {
  display: none;
}

.refund-revoke-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  color: #667085;
  font-size: 13px;
}

.refund-revoke-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  margin-top: 10px;
  overflow: auto;
  padding-right: 4px;
}

.refund-revoke-option {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  padding: 11px 12px;
}

.refund-revoke-option:hover {
  border-color: #9cc8f0;
  background: #f8fbff;
}

.refund-revoke-option input {
  width: 16px;
  height: 16px;
}

.refund-revoke-option-main {
  min-width: 0;
}

.refund-revoke-option-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.refund-revoke-option-title strong {
  color: #111827;
  font-size: 14px;
}

.refund-revoke-option-title code {
  border-radius: 6px;
  background: #eef6ff;
  color: #1d4ed8;
  font-size: 12px;
  padding: 2px 6px;
}

.refund-revoke-option-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
  color: #667085;
  font-size: 12px;
}

.refund-revoke-bound-tag {
  border-radius: 999px;
  background: #ecfdf3;
  color: #237a43;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
}

.refund-revoke-reason {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  color: #667085;
  font-size: 12px;
}

.refund-revoke-reason textarea {
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #1f2933;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 11px;
  resize: vertical;
}

@media (max-width: 980px) {
  .stats-grid,
  .user-overview-grid,
  .user-detail-grid,
  .user-info-grid,
  .user-admin-tools,
  .module-grid,
  .data-center-layout,
  .upload-form,
  .file-row,
  .material-layout,
  .form-grid,
  .section-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .code-table-head,
  .code-row,
  .feedback-table-head,
  .feedback-row,
  .user-table-head,
  .user-row,
  .user-entitlement-head,
  .user-entitlement-row,
  .user-transaction-head,
  .user-transaction-row,
  .user-feedback-head,
  .user-feedback-row,
  .refund-request-head,
  .refund-request-row,
  .data-material-head,
  .data-material-row,
  .data-user-head,
  .data-user-row,
  .diagnostic-table-head,
  .diagnostic-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .refund-revoke-meta {
    grid-template-columns: 1fr;
  }

  .page-preview-card-grid {
    grid-template-columns: 1fr;
  }

  .pending-file-title span {
    flex-basis: 100%;
    text-align: left;
  }

  .formal-file-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .panel-actions,
  .admin-login,
  .sales-report-heading-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .panel-actions .search-input,
  .compact-input {
    width: 100%;
  }

  .formal-file-form {
    grid-template-columns: 1fr 1fr;
  }

  .material-edit-form .form-grid,
  .material-edit-form .formal-file-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-admin-form,
  .user-action-form,
  .user-admin-actions {
    grid-template-columns: 1fr;
  }

  .product-preview-generator {
    grid-template-columns: minmax(0, 1fr) 110px auto auto;
  }

  .product-preview-generator .field-hint {
    grid-column: 1 / -1;
    white-space: normal;
  }

  .material-edit-form .page-preview-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .diagnostic-alert-metrics {
    grid-template-columns: repeat(3, minmax(104px, 1fr));
  }
}

@media (max-width: 720px) {
  .stats-grid,
  .user-overview-grid,
  .user-detail-grid,
  .user-info-grid,
  .code-summary-grid,
  .user-admin-tools,
  .upload-form,
  .form-grid,
  .section-guide-grid,
  .data-center-layout,
  .formal-file-form {
    grid-template-columns: 1fr;
  }

  #material-edit-panel {
    padding: 12px;
  }

  .material-edit-form .form-grid,
  .material-edit-form .formal-file-form,
  .product-preview-generator,
  .material-edit-form .page-preview-card-grid {
    grid-template-columns: 1fr;
  }

  .material-edit-form .material-code-field {
    grid-column: 1 / -1;
  }

  .formal-source-picker {
    grid-template-columns: 1fr;
  }

  .diagnostic-alert-row,
  .diagnostic-table-head,
  .diagnostic-row {
    grid-template-columns: 1fr;
  }

  .diagnostic-alert-actions {
    width: 100%;
  }

  .diagnostic-alert-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .diagnostic-alert-samples {
    grid-template-columns: 1fr;
  }

  .diagnostic-alert-recommendation {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .compact-action-button {
    width: 100%;
  }
}
.admin-wechat-dialog {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
}

.admin-wechat-dialog.hidden {
  display: none;
}

.admin-wechat-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 20, 24, 0.62);
}

.admin-wechat-card {
  position: relative;
  z-index: 1;
  width: min(360px, 100%);
  padding: 24px;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
  text-align: center;
}

.admin-wechat-head h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0;
}

.admin-wechat-head p {
  min-height: 22px;
  margin: 8px 0 0;
  color: #666;
  font-size: 14px;
  letter-spacing: 0;
}

.admin-wechat-qr {
  display: block;
  width: 220px;
  height: 220px;
  margin: 18px auto;
  border: 1px solid #ececec;
  background: #fff;
  object-fit: contain;
}

.admin-wechat-card .secondary-button {
  width: 100%;
}

.activation-admin-form { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin:20px 0; }
.activation-admin-form label { display:flex; flex-direction:column; gap:8px; font-size:13px; }
.activation-generated { width:100%; min-height:110px; padding:14px; box-sizing:border-box; border:1px solid #ddd7cb; border-radius:12px; font-family:monospace; }
#activation-rows code { overflow-wrap:anywhere; }
#activation-rows button { margin:4px; }

#activation-panel .table-wrap { overflow-x:auto; }
#activation-panel table { width:100%; border-collapse:collapse; font-size:13px; text-align:left; }
#activation-panel th { color:#697586; background:#f7f9fc; font-weight:600; }
#activation-panel td, #activation-panel th { padding:14px 12px; border-bottom:1px solid #e9edf2; vertical-align:top; line-height:1.65; }
#activation-panel td:first-child { min-width:230px; }
#activation-panel td:last-child { min-width:145px; }
.activation-confirm-dialog { width:min(480px,90vw); border:1px solid #dce3eb; border-radius:18px; padding:28px; box-shadow:0 24px 70px #0003; }
.activation-confirm-dialog::backdrop { background:#18233366; }
#activation-confirm-detail { white-space:pre-wrap; line-height:1.7; }
#activation-confirm-reason { width:100%; min-height:100px; box-sizing:border-box; padding:12px; margin-top:10px; border:1px solid #dce3eb; border-radius:10px; }