.ui-state-panel {
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 10px 0;
  padding: 11px 13px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #f8fafc;
  color: #334155;
  font-size: 14px;
  line-height: 1.55;
  text-align: left;
}

.ui-state-panel::before {
  display: inline-grid;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.ui-state-panel.ui-state-loading {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1e3a8a;
}

.ui-state-panel.ui-state-loading::before {
  box-sizing: border-box;
  content: "";
  border: 2px solid #93c5fd;
  border-top-color: #2563eb;
}

.ui-state-panel.ui-state-success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.ui-state-panel.ui-state-success::before {
  content: "✓";
  background: #dcfce7;
  color: #15803d;
}

.ui-state-panel.ui-state-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.ui-state-panel.ui-state-error::before {
  content: "!";
  background: #fee2e2;
  color: #b91c1c;
}

.ui-state-panel.ui-state-empty {
  border-color: #dbe4ef;
  background: #f8fafc;
  color: #64748b;
}

.ui-state-panel.ui-state-empty::before {
  content: "—";
  background: #e2e8f0;
  color: #475569;
}

.platform-page button:disabled,
.customer-share-page button:disabled,
.platform-page input[type="file"]:disabled,
.customer-share-page input[type="file"]:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

@media (prefers-reduced-motion: no-preference) {
  .ui-state-panel.ui-state-loading::before {
    animation: p2-ui-state-spin 0.85s linear infinite;
  }
}

@keyframes p2-ui-state-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .ui-state-panel {
    margin: 8px 0;
    padding: 10px 11px;
    border-radius: 9px;
    font-size: 13px;
  }
}