.state-inline { border-left: 3px solid var(--trino-info); color: var(--text-dim); font-size: 12px; padding: 9px 12px; }
.state-inline.warning { border-left-color: var(--warn); }
.state-inline.danger { border-left-color: var(--danger); }
.state-inline.success { border-left-color: var(--green); }

.system-state {
  align-items: flex-start;
  background: rgba(154, 164, 163, .06);
  border: var(--trino-border-default);
  border-left: 3px solid var(--trino-info);
  border-radius: var(--trino-radius-md);
  display: flex;
  gap: var(--trino-space-3);
  padding: var(--trino-space-3) var(--trino-space-4);
}
.system-state.warning { background: rgba(240, 191, 86, .07); border-left-color: var(--trino-warning); }
.system-state.danger { background: rgba(240, 127, 134, .07); border-left-color: var(--trino-danger); }
.system-state.success { background: rgba(91, 213, 138, .07); border-left-color: var(--trino-success); }
.system-state-icon { flex: 0 0 20px; font-weight: 900; text-align: center; }
.system-state-title { color: var(--text); font-size: 12px; font-weight: 800; }
.system-state-message { color: var(--text-dim); font-size: 11.5px; line-height: 1.5; margin-top: var(--trino-space-1); }

.skeleton {
  animation: trino-skeleton 1.25s ease-in-out infinite alternate;
  background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.085), rgba(255,255,255,.035));
  background-size: 200% 100%;
  border-radius: var(--trino-radius-sm);
  min-height: 12px;
}
@keyframes trino-skeleton { to { background-position: -100% 0; opacity: .7; } }